I am making a Dashing widget and I would like the text to fade in/out when the widget is updated. At this point I can only get the widget to animate when the dashboard page is loaded. What do I need to add so that the animation runs every time the widget is updated?
Here is the scss for the widget:
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #ec663c;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-textblink {
background-color: $background-color;
.title {
color: $title-color;
}
.text {
color: $moreinfo-color;
animation: blink;
animation-duration: 1s;
animation-iteration-count: 15;
}
}
#keyframes blink {
0% { opacity: 1.0; }
50% { opacity: 0.35; }
100% { opacity: 1.0; }
}
Here is the html:
<h1 class="title" data-bind="title"></h1>
<p class="text" data-bind="text"></p>
The coffee file is empty.
In your onData function, apply the CSS class to the element responsible for animating in and out. Or alternatively just handle the animation in JavaScript.
You can put that code on your textblink.coffee and let the javascript handle it
#textblink.coffee
class Dashing.InfoProgress extends Dashing.Widget
onData ->
$(#node).fadeOut().fadeIn()
Related
So i have a simple button with a shiny effect run through using ::after and transform.
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
In original code, the percent in #keyframe was 100% and 'sheen' effect ran forward in exactly 2s.
Here i set the percent to below 100% (75% for example), the effect will run forward for 75% of the animation-duration, then runs backward for the last 25%.
Does that behavior have anything to do with 'transform' property? can anyone explain it to me
As a matter of fact, the animation does not repeat itself. Animation begins-and-ends. It just emulates properties that give it a reference value when you not define what to do animation.
Here, you basically define that moment by giving concrete properties such as where it will be at the 75%th moment of 2s, what color it will be, what its opacity will be. But from 75.1% you haven't defined what to do until the animation is complete (100%).
If CSS Animations are not defined at any instant of the frames, they accept parent properties that refer to it.
.dummy {
animation: dummy ... ... ...;
opacity: .75;
}
#keyframes dummy {
50% {
opacity: .5;
}
}
In the example above, the element will animate with an opacity of typically .75, .50 and .75 respectively.
If we didn't specify the property opacity: .75;, it would also animate the 1.0, .50 and 1.0 animation with default values.
You can imagine this for the opposite situation as well.
In other words, if I define where an element will be initially in the animation and this position is different from the values it actually references, the element will be animated by moving from the point I defined to the reference values.
Here is a simple example,
p {
animation-duration: 3s;
animation-name: slidein;
}
#keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>
Returning to the example in your question, it would suffice to define that it should exhibit the same behavior between 75% and 100%. Here is the example;
.shiny {
background-color: #000000;
padding: 10px;
color: white;
border-radius: 5px;
position: relative;
}
#keyframes sheen {
/* make the sheen run forward for 1.5s then back for the last 0.5s */
75%, 100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
.shiny::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
animation: sheen 2s;
}
<button class="shiny">Shiny Button</button>
As you can see in this codesandbox, I have used the 'transform' property, based on this answer, also tried changing the font-size on the StepIconProps (commented out code on CSB).
The first option results in the circle resizing while still retaining its centre, and hence its alignment with the line, but the text stays in the same place.
The second option means the circle loses its alignment with the line, but the text stays nicely positioned relative to the circle.
I'm not sure either are entirely the correct way to do it. There is an example in the docs where the icon has been customised, but this involves an implementation a whole new icon, which I'd rather avoid. I am happy with all of the default appearance, with the only exception being the size.
I created a div element using styled components and I passed it as a prop icon at StepLabel from material UI.
import React, { useState, useEffect } from "react";
import { Stepper, Step, StepLabel } from "#material-ui/core";
const stepsOptions = {
0: [0],
1: [0, 1],
2: [0, 1, 2],
};
const StepIcon = styled.div`
background-color: ${({ backgroundColor }) =>
backgroundColor ? "#008a98" : "#DCDCDC"};
color: #fff;
width: 50px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 20px;
border-radius: 50%;
margin-top: -13px;
font-weight: 500;
z-index: 1;
`;
const Component = () => {
const [stepsArray, setStepsArray] = useState([]);
useEffect(() => {
setStepsArray(stepsOptions[activeStep]);
}, [activeStep]);
return (
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label, index) => (
<Step key={label}>
<StepLabel
icon={
<StepIcon backgroundColor={stepsArray.includes(index)}>
<p>{index + 1}</p>
</StepIcon>
}
>
<Paragraph>{label}</Paragraph>
</StepLabel>
</Step>
))}
</Stepper>
)}
I am wondering if it's possible to use Leaflet.FreeDraw with leaflet.path.drag to be able to drag the polygon created by FreeDraw plugin.
jsfiddle
I tried to enable dragging plugin like this, but it doesn't work.
const map = new L.Map(document.querySelector('section.map'), { doubleClickZoom: false }).setView(LAT_LNG, 14);
L.tileLayer(TILE_URL).addTo(map);
const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
map.addLayer(freeDraw);
freeDraw.dragging.enable();
You could extract the bounds from the FreeDraw by listening to the markers event to create a polygon or other map object using leaflet enabled with dragging. See working example below.
You should consider whether you would like to disable the FreeDraw after this, using the option leaveModeAfterCreate:true as the user may get additional polygons when dragging
const LAT_LNG = [51.505, -0.09];
const TILE_URL = 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}#2x.png';
const map = new L.Map(document.querySelector('section.map'), { doubleClickZoom: false }).setView(LAT_LNG, 14);
L.tileLayer(TILE_URL).addTo(map);
const freeDraw = new FreeDraw({
mode: FreeDraw.ALL,
leaveModeAfterCreate:true //recommended to prevent undesired creation of multiple polygons
});
map.addLayer(freeDraw);
//freeDraw.dragging.enable();
//STEP 1: Listen to markers event raised by free draw whenever edits (create/edit/deletions are made to the map)
freeDraw.on("markers",function(event){
//we are only interested in create events
//we aim to extract the bounds and remove the existing
// freedraw references. If it is that you would like your
// user to edit the polygon, then you may keep these and do the // additional work to manage and update these references
if(event.eventType=='create' && event.latLngs.length > 0){
//capture the current polygon bounds (store in 1st position)
var latLngs = event.latLngs[0];
freeDraw.clear(); //clear freedraw markers
//create polygon from lat lng bounds retrieved
var polygon = L.polygon(
latLngs.map(function(latLng){
return [latLng.lat,latLng.lng];
}), {
color: 'red',
draggable: true //make polygon draggable
}).addTo(map);
}
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.map {
width: 100vw;
height: 100vh;
}
.map.mode-create {
cursor: crosshair;
}
.leaflet-edge {
background-color: #95bc59;
box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, .35);
border-radius: 50%;
cursor: move;
outline: none;
transition: background-color .25s;
}
.leaflet-polygon {
fill: #b4cd8a;
stroke: #50622b;
stroke-width: 2;
fill-opacity: .75;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet-src.js"></script>
<script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.iife.js"></script>
<script src="https://npmcdn.com/leaflet.path.drag/src/Path.Drag.js"></script>
<section class="map"></section>
NB. Also see working example on js-fiddle here https://jsfiddle.net/ytevLbgs/
How can we change the default underline color of a ion-text in only a single page in Ionic 4?
The underline is actually a part of the ion-item, not the ion-input.
ion-item {
--border-color: var(--ion-color-danger, #f1453d);
}
Ionic 4.x uses CSS Custom Properties for most of the time.
src/app/pages/test/test.page.scss
:host {
ion-item {
--border-color: white; // default underline color
--highlight-color-invalid: red; // invalid underline color
--highlight-color-valid: green; // valid underline color
}
}
If necessary, please check the other custom properties here.
For Ionic V4.X is a little bit diffrent.
You can open specific_page.scss file where you want to change ion-input border when input value is Valid o Invalid
Change the colors of the following class, like this:
:host {
.item-interactive.ion-invalid{
--highlight-background: yellow !important;
}
.item-interactive.ion-valid{
--highlight-background: black !important;
}
}
Try this css
.item-has-focus{
--highlight-background: #e2e2e2;
}
To aggregate in app.scss file
.ios {
.item-has-focus.ion-invalid {
--border-color: var(--ion-color-danger, #f1453d);
}
.ion-valid {
--border-color: var(
--ion-item-border-color,
var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
);
}
.custom-item {
--background: transparent;
color: #fff !important;
--background-focused: transparent;
}
}
.md.custom-item {
--background: transparent;
color: #fff !important;
--background-focused: transparent;
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
);
}
Or use class to you custom .custom-item.hydrated.ion-touched.ion-dirty.ion-invalid.item-label.item-interactive.item-input.item-has-focus.item.ios.ion-focusable
i am currently working on a project which is taking an active check feed from Nagios Check_mk and displaying on a text widget. i am trying to get the widget to change colour, working through the workshop page i am stuck with the coffee script, it doesn't appear to have any effect when the value is changed. here is what i have
alert.coffee
class Dashing.Alert extends Dashing.Widget
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with #node
# Example: $(#node).fadeOut().fadeIn() will make the node flash each time data comes in.
#accessor 'value', Dashing.AnimatedValue
#accessor 'isTooHigh', ->
#get('value') > 200
alert scss
.widget-alert {
background: #00ff99;
font-size: 65px;
font-weight: bold;
}
.danger {
background: #ff1a00;
}
all other files are exactly as detailed in the workshop page: any help greatly appreciated.
Basically the change of color or animated flashing of color was handled by the scss #keyframe rule, you must bind it to a selector, otherwise the animation will have no effect
Here's some example
$background-alert-color-1: #FFFF66;
$background-alert-color-2: #FF9618;
$text-alert-color: #fff;
#-webkit-keyframes status-alert-background {
0% { background-color: $background-alert-color-1; }
50% { background-color: $background-alert-color-2; }
100% { background-color: $background-alert-color-1; }
}
.widget.status-alert {
color: $text-alert-color;
background-color: $background-alert-color-1;
#include animation(status-alert-background, 2s, ease, infinite);
.icon-alert-sign {
display: inline-block;
}
.title, .more-info {
color: $text-alert-color;
}
For some example and reference (also for the coffescript) you can check this one dashing_zabbix