Input from Spectrum js for polymer data binding - polymer
I am looking to dynamically insert a spectrum input field to have a more customized color picker in my template. The issue I've encountered is that the object I want to bind data to is null from inside of spectrum functions. I'm wondering what the best way to go about integrating spectrum into a polymer template is.
As you will see, when editMode is initiated, spectrum is instantiated and the div is inserted into the HTML. On change(), I want to take whatever color is selected and bind it to the document object. My console.log returns that the document is indeed null. Inside of the editMode function, before going into spectrum, document is a polymer object as expected. I tried making document a global var but that doesn't make a difference because it's no longer the binded object so I can't access any of its properties, save it, etc.
Does spectrum need to be a custom element? Any insight?
<script>
Polymer({
is: 'image-view',
behaviors: [Test.LayoutBehavior],
properties: {
/**
* #doctype Image
*/
document: {
type: Object,
observer: '_documentChanged'
},
edit: {
type: Boolean,
value: false
}
},
_canEdit: function(doc) {
return doc && doc.type !== 'Root' && this.hasPermission(doc, 'Write');
},
_editMode: function() {
this.edit = true;
$(".spectrum-div").html(
"<label>Brand Text Color</label><input type='text' id='full'/>"
);
$("#full").spectrum({
color: "#ECC",
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxSelectionSize: 10,
preferredFormat: "hex",
move: function (color) {
},
show: function () {
},
beforeShow: function () {
},
hide: function () {
},
change: function(color) {
if (this.document != null) {
console.log('THIS DOCUMENT IS NOT NULL');
console.log(this.document.properties["image:brand_text_color"]);
} else console.log('Sorry, document is null.');
var col = color.toHexString();
//$("#brand-text-color").val(col);
//document.getElementById("brand-text-color").value = col;
this.document.properties["image:brand_text_color"] = col;
},
palette: [
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
"rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
]
});
},
_documentChanged: function() {
if (this.document) {
this.edit = false;
}
},
_isAdmin: function(user) {
return user.isAdministrator;
}
});
</script>
First you can place the input field into your element's local DOM, and hide it when not in edit mode:
<label hidden$="[[!edit]]" for="full">Brand Text Color</label>
<iron-input bind-value="{{document.prop}}">
<input hidden$="[[!edit]]" type="text" id="full"/>
</iron-input>
(Note that I also added an iron-input, since you will need value-binding below.)
That way you can access it from JavaScript by id, via this.$.full.
Finally, you can initialize spectrum from Polymer's attached callback:
Polymer({
properties: {
document: {
type: Object,
// initialize with an object holding all required keys,
// for proper change notification
value: function() {
return {
// document properties here
prop: null
};
},
observer: '_syncDocument'
},
...
},
...
attached() {
$(this.$.full).spectrum({
...
});
},
_syncDocument(newValue) {
// window.document[???] = newValue.prop;
}
...
});
Now I'm not sure what you're trying to achieve with the document. Is it the window.document? In that case you'd need to sync your element.document.value to window.document.[propertyName] manually, in an observer on your element.document.
PS: Don't forget to include iron-input, or work around my quick implementation with something else.
Related
navigate after eight seconds from pressing a button
this is my button
Button(action: {
SearchSomeone()
},label: {
NavigationLink(destination: mySearchList()){
HStack(alignment: .center) {
Text("Search")
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(.white)
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.background(
RoundedRectangle(cornerRadius: 25)
.fill(Color("Color"))
.shadow(color: .gray, radius: 2, x: 0, y: 2)
)
}
and this button does the function and search together at the same time and since search would take time so I won't see the list, how can I do the function and then after 8 seconds I do the navigation after it ? thank you
According to the information, you'd like to switch to a new view after 8 seconds. This code should work for you.
import SwiftUI
struct ContentView: View {
//Variable to see if view should change or not
#State var viewIsShowing = false
var body: some View {
//Detecting if variable is false
if viewIsShowing == false {
//Showing a button that sets the variable to true
Button(action: {
//Makes it wait 8 seconds before making the variable true
DispatchQueue.main.asyncAfter(deadline: .now() + 8.0) {
viewIsShowing = true
}
}) {
//Button text
Text("Search")
.font(.system(size: 17))
.fontWeight(.bold)
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.background(
RoundedRectangle(cornerRadius: 25)
.fill(Color("Color"))
.shadow(color: .gray, radius: 2, x: 0, y: 2)
)
}
} else {
//If the variable equals false, go here
View2()
}
}
}
//Your other view you want to go to
struct View2: View {
var body: some View {
Text("abc")
}
}
Problems when receiving websocket data(it's json but result is list of number)
I am a beginner developer developing with Dart.
There was a problem while working with websockets.
According to the API help, it's obviously JSON.
but data is list of number :(
Why does it work this way?
I'll attach my code and results
please help :(
I'm sorry I'm not good at English, I hope you understand
--------------code--------------------------------
import 'dart:convert';
import 'package:web_socket_channel/web_socket_channel.dart';
void main() async {
/// Create the WebSocket channel
final channel = WebSocketChannel.connect(
Uri.parse('wss://api.upbit.com/websocket/v1'),
);
channel.sink.add(jsonEncode([{"ticket":"test"},{"type":"ticker","codes":["KRW-BTC"]},{"format":"SIMPLE"}])
);
/// Listen for all incoming data
channel.stream.listen(
(data) {
print(data);
},
onError: (error) => print(error),
);
}
ouput
flutter: [123, 34, 116, 121, 34, 58, 34, 116, 105, 99, 107, 101, 114, 34, 44, 34, 99, 100, 34, 58, 34, 75, 82, 87, 45, 66, 84, 67, 34......]
expected
{"mk":"KRW-BTC","tms":1523531768829,"td":"2018-04-12","ttm":"11:16:03","ttms":1523531763000,"tp":7691000.0,"tv":0.00996719,"ab":"BID","pcp":7429000.00000000,"c":"RISE","cp":262000.00000000,"sid":1523531768829000,"st":"SNAPSHOT"}
Can't create a slider (<rzslider>) in the UI
Is this code is correct to run ? because i have a question that is tag will execute without any built in libraries of
can this <rzslider> tag run directly in the page without any built-in packages of <rzslider>
running it using linux server.
<rzslider rz-slider-model="slider.minValue"
rz-slider-high="slider.maxValue"
rz-slider-options="slider.options"></rzslider>
$scope.slider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
using this tags i can't able to create a slider in the UI. so how can i execute it to show the slider in the UI?
You should try like as below
In view
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options">
</rzslider>
In controller
$scope.slider = {
value: 10,
options: {
floor: 7,
ceil: 10,
showTicks: true,
showSelectionBar: true,
hidePointerLabels: true,
hideLimitLabels: true,
showTicksValues: false,
readOnly: true,
getTickColor: function (value) {
if (value < 3)
return 'red';
if (value < 6)
return 'orange';
if (value < 9)
return 'yellow';
return '#2AE02A';
}
},
}
Make sure you have add rzSlider module in your app.js
How to reformat (transform) my json results with javascript?
I have a simple loop that extracts a subset of json objects from a larger dataset.
function getData(d) {
var data = {};
for (var i=0; i < d.length; i++){
data[i] = {
'date' : d[i].date,
'light' : Math.round(d[i].details.light/60),
'deep' : Math.round(d[i].details.deep/60),
'awake' : Math.round(d[i].details.awake/60),
'duration': Math.round(d[i].details.duration/60),
'quality': Math.round(d[i].details.quality*10)
};
console.log(data[i]);
};
return data;
}
getData(d);
It generates json results in the form of,
{
date: 20150809,
light: 168,
deep: 206,
awake: 64,
duration: 438,
quality: 100
}, ...
How might I get this into the desired form,
[{
"key":"light",
"date":20150809,
"value":168
},
{
"key":"deep",
"date": 20150809,
"value":206
},
{
"key":"awake",
"date":20150809,
"value":64
},
{
"key":"duration",
"date": 20150809,
"value":438
},
...
{
"key":"quality",
"date":20150809,
"value":6100
}]
My question is, how might I achieve this without iterating over the dataset five times (once for each of the 5 key types)? I assume at least a minimum of one iteration would be required. A jquery solution would be acceptable.
I'm seeking one array containing all the json objects as opposed to an associative array of nested objects.
Thanks
Suppose your data is in a array in this format :
var data = [
{
date: 20150809,
light: 168,
deep: 206,
awake: 64,
duration: 438,
quality: 100
},
{
date: 20153203,
light: 2,
deep: 21,
awake: 21,
duration: 21,
quality: 32
}
...
];
You can try something like this :
var results = [];
data.forEach(function(e) {
for (var key in e) {
if (key !== 'date')
results.push({
key : key,
date : e.date,
value : e[key]
});
}
});
Considering the object
{
date: 20150809,
light: 168,
deep: 206,
awake: 64,
duration: 438,
quality: 100
}
You want to turn each key into a object without looping through every object. I would to the following:
function convertToJson(obj){
var myJson = {};
var myKeys = obj.keys(); // return an array with the keys of the object
myJson.keys = myKeys[1];
myJson.date = myKeys[0]; // your date
myJson.value = obj.light;
... // do the same with the rest of the elements, if you don't want to loop.
return JSON.stringfy(myJson);
}
I'm no javascript guru, so I appreciate any feedback.
Node Streams, wrap array as object
I have a metadata object in the form
{
filename: "hugearray.json",
author: "amenadiel",
date: "2014-07-11",
introduction: "A huge ass array I want to send to the browser"
}
That hugearray.json is a text file in my folder which contains, as its name implies, an array of potentially infinite elements.
[
[14, 17, 25, 38, 49],
[14, 41, 54, 57, 58],
[29, 33, 39, 53, 59],
...
[03, 14, 18, 34, 37],
[03, 07, 14, 29, 33],
[05, 16, 19, 30, 49]
]
What I want to achieve is to output to the browser an object which is the original object, with the extra key 'content' which is the huge array
{
filename: "hugearray.json",
author: "amenadiel",
date: "2014-07-11",
introduction: "A huge ass array I want to send to the browser",
content: [
[14, 17, 25, 38, 49],
...
[05, 16, 19, 30, 49]
]
}
But since I don't know the array size, I don't want to store the whole thing in memory before outputting, so I thought of using streams. I can stream the array fine with
var readStream = fs.createReadStream("hugearray.json");
readStream.on('open', function () {
readStream.pipe(res);
});
And of course I can send the metadata object to the res with
res.json(metadata);
And I've tried deconstructing metadata, writing each key : value pair and leaving a content key open, then to pipe the file results, then closing the curly braces. It doesn't seem to work:
{
filename: "hugearray.json",
author: "amenadiel",
date: "2014-07-11",
introduction: "A huge ass array I want to send to the browser",
content:
}[
[14, 17, 25, 38, 49],
[14, 41, 54, 57, 58],
[29, 33, 39, 53, 59],
...
[03, 14, 18, 34, 37],
[03, 07, 14, 29, 33],
[05, 16, 19, 30, 49]
]
I guess I need to wrap the stream in my metadata content key instead of trying to output json and stream into the result. ¿Any ideas?
Well, my question went unnoticed but made me win the Tumbleweed badge. It's something.
I kept investigating and I came out with a solution. I was hoping to find a one liner, but this one works too and so far I've been able to output several MBs to the browser without noticeable performance hit in my node process.
This is the method I used
app.get('/node/arraystream', function (req, res) {
var readStream = fs.createReadStream("../../temp/bigarray.json");
var myObject = {
filename: "hugearray.json",
author: "amenadiel",
date: "2014-07-11",
introduction: "A huge ass array I want to send to the browser"
};
readStream.on('open', function () {
console.log('readStream open');
var myObjectstr = JSON.stringify(myObject);
res.write(myObjectstr.substring(0, myObjectstr.length - 1) + ',"content":');
});
readStream.on('error', function (err) {
console.log('readStream error', err);
throw err;
});
readStream.on('close', function () {
console.log('readStream closed');
readStream.destroy();
res.write('}');
res.end();
});
readStream.on('data', function (data) {
console.log('readStream received data', data.length);
var buf = new Buffer(data, 'ascii');
res.write(buf);
});
});
Basically, instead of turning my object into a stream, I turned my array into a buffer.