I want to communicate a "Go Left" button, in a three.js application, by using a left-arrow icon (instead of just labelling it "left")
Many of the three.js examples use dat.GUI to set up GUI control (e.g. button, slider). In all these examples the buttons show up as rectangular boxes
Is it possible to represent a dat.GUI button with an icon? (or at least place a background image behind the button?)
Otherwise, are there other GUI alternatives that are easy to use with three.js?
EDIT:
I'm having trouble to embed the css code inside javascript.
I added the code below and when I click on the button it displays in the console "BEG setStyle", i.e. the function setStyle() is executed.
But I don't see a change in the color or the background image of the "Nukeem all!" button.
#prisoner849 Can you help me with this?
Thanks
var gui = new dat.GUI(),
var obj = {
add:function()
{
console.log("clicked")
updateTheta();
this.setStyle();
},
setStyle:function()
{
console.log("BEG setStyle")
this.color = "#00ff00";
this.backgroundImage = "url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png')";
}
};
gui.add(obj, 'add').name('Nukeem all!');
Thanks.
TheJim01 is right. You can do the trick with CSS.
Here is just a rough concept:
var gui = new dat.GUI();
var obj = {
add: function() {
alert("clicked!")
}
};
gui.add(obj, "add").name("Nuke'em all!");
gui.add(obj, "add").name("I'm Fine!");
gui.add(obj, "add").name("Harmony");
var fourth = gui.add(obj, "add").name("CSS is awesome!");
var fourthStyle = fourth.domElement.previousSibling.style;
fourthStyle.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/hawcons/32/700035-icon-77-document-file-css-16.png)';
fourthStyle.backgroundRepeat = 'no-repeat';
fourthStyle.backgroundPosition = 'left';
fourthStyle.backgroundColor = 'white';
fourthStyle.color = 'black';
console.log(fourthStyle);
.function:nth-child(1) .property-name {
background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Radiation.png');
background-repeat: no-repeat;
background-position: right;
background-color: gray;
color: yellow;
}
.function:nth-child(2) .property-name {
background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/OK.png');
background-repeat: no-repeat;
background-position: center;
background-color: teal;
color: aqua;
}
.function:nth-child(3) .property-name {
background-image: url('https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/In-yang.png');
background-repeat: no-repeat;
background-position: left;
background-color: pink;
color: red;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>
Related
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;
}
I need for Fine Uploader to be able to drawThumbnail as a background image or to otherwise create scaled and cropped squares.
Basically, I am trying to reproduce the behavior I used in angularjs / flowjs, which was (more or less):
// I modified flowjs to set the background-image here instead of src with the base64 image.
<div ng-repeat="file in $flow.files" flow-img background-size: 'cover'">
This is the API on how to draw a thumbnail, but it specifically states that it returns a img or canvas. Instead, I'd like it set to the css property background-image.
http://docs.fineuploader.com/branch/master/api/methods.html#drawThumbnail
This solution gets close, but does not achieve the same effect as background-size: cover.
#image {
width: 33%;
padding-top: 33%;
position: relative;
}
#image canvas {
position: absolute;
top: 0;
bottom: 0;
}
...
callbacks: {
onSubmit: function(id, fileName) {
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
$('#image').html(canvas);
this.drawThumbnail(id, canvas, 500, false);
}
Using the UI mode give me exactly the same issue, I can only use it as the src like so:
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
This is my preferred solution...
#image {
width: 33%;
padding-top: 33%;
position: relative;
background-size: cover;
}
...
callbacks: {
onSubmit: function(id, fileName) {
this.drawThumbnail(); // somehow onto the background property of #image
}
Another solution, if widely adapted, would be to use elements as backgrounds (because then I could use the canvas for the #image background), but as of right now this is not a practical solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/element
Another solution would be to watch for changes on the $('#image img').attr('src'). Hide the img element and set the background-image of #image on change. But, that's another ridiculous solution when the encoded image is right there.
If there isn't already a way to do this with fine uploader, why restrict the element of type img? Why not take any element and any attribute? Why not just return the base64 image and let us set it to any attribute?
Thanks in advance.
It sounds like the easiest solution would be to ask Fine Uploader to generate a thumbnail, pass the API method a temporary <img>, grab the src attribute from the <img> and use that to construct the background-image.
For example:
callbacks: {
onSubmit: function(id) {
var tempImg = document.createElement('img'),
self = this;
this.drawThumbnail(id, tempImg, 500).then(function() {
var fileContainerEl = self.getItemByFileId(id);
previewImg = fileContainerEl.getElementsByClassName('previewImg')[0];
previewImg.style['background-image'] = 'url("' + tempImg.src + '")';
});
}
I have few ckeditor-s on my page, editors work in iframe mode, they are not inline. Each of them has autogrow option turned on. So sometimes content of the editor is higher than screen and toolbar is not visible. This obviously creates usability issues for people working with editor.
To solve this I would like to keep toolbar of currently active editor on the screen. The only problem I am not sure where should I start.
Few things I've figured out already:
1) It cannot be solved with CSS-only, as long as I need toolbar be fixed only for active editor and when its toolbar is not on the screen
2) I would rather create some CKeditor plugin than creating external code that controls scroll position and moves cke_toolbox basing on that.
What would you suggest?
I think I found solution that works for me.
JS code (updated):
$(function () {
if (typeof CKEDITOR === 'undefined') {
return;
}
var floatingClass = 'floatingToolbox';
var $editors;
CKEDITOR.on('instanceReady', function (e) {
$editors = $('.cke', e.element);
e.editor.on('focus',function() {
checkToolbars($editors, floatingClass);
$(window).on('scroll.ckeditor', function () {
checkToolbars($editors, floatingClass);
});
});
e.editor.on('blur', function () {
$(window).unbind('scroll.ckeditor');
$('.cke_toolbox', $editors).removeClass(floatingClass);
});
});
});
function checkToolbars($editors, floatingClass) {
if (!$editors)
return;
var editor = $editors.filter('.cke_focus');
if (editor.length == 0)
return;
var toolbox = $('.cke_toolbox', editor);
var offset = editor.offset();
var top = offset.top;
var bottom = offset.top + editor.height() - 55;
var scrollPosition = $(window).scrollTop();
if (top < scrollPosition && bottom > scrollPosition) {
toolbox.addClass(floatingClass).css(
{
left: (offset.left + 1) + 'px',
width: editor.width() + 'px'
});
} else if (toolbox.hasClass(floatingClass)) {
toolbox.removeClass(floatingClass);
}
}
CSS:
.floatingToolbox {
background-color: #cce4fb !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fcfe), to(#cce4fb)) !important;
background-image: -moz-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: -webkit-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: -o-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: -ms-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: linear-gradient(top, #f9fcfe, #cce4fb) !important;
border-bottom: 1px solid #b7cde1 !important;
border-top: 1px solid #b7cde1 !important;
box-sizing: border-box;
display: block;
padding: 5px 5px 0 5px !important;
position: fixed;
top: 29px;
z-index: 10000;
}
Made a plugin for this purpose.
Create sticky/plugin.js in CKEditor plugins folder.
Enable the plugin adding the following code inside your config.js.
plugin.js
CKEDITOR.plugins.add( 'sticky', {
init: function( editor ) {
setToolbars();
['scroll', 'click'].forEach(function(e) {
window.addEventListener(e, function(){
setToolbars();
}, false);
});
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'click', function () {
setToolbars();
});
});
function setToolbars() {
document.querySelectorAll(".cke").forEach(function(editor) {
let inner = editor.querySelector('.cke_inner'),
content = editor.querySelector('.cke_contents'),
toolbar = editor.querySelector('.cke_top');
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
function getCoords(elem) { // crossbrowser version
let box = elem.getBoundingClientRect(),
body = document.body,
docEl = document.documentElement,
scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop,
scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft,
clientTop = docEl.clientTop || body.clientTop || 0,
clientLeft = docEl.clientLeft || body.clientLeft || 0,
top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
inner.style.position = "relative";
toolbar.style.position = "absolute";
toolbar.style.width = "100%";
toolbar.style.left = "0";
toolbar.style.margin = "0";
toolbar.style.boxSizing = "border-box";
let editorTop = getCoords(editor).top;
let editorHeight = editor.offsetHeight;
let toolbarHeight = toolbar.offsetHeight;
content.style.paddingTop = toolbarHeight+"px";
let contentHeight = content.offsetHeight;
let editorBorderTopWidth = parseFloat(getComputedStyle(editor).borderTopWidth);
if((scrollTop > editorTop) && (scrollTop < (editorTop+contentHeight-toolbarHeight))) {
toolbar.style.top = (scrollTop-editorTop-editorBorderTopWidth) + "px";
} else if (scrollTop >= (editorTop+contentHeight-toolbarHeight)) {
toolbar.style.top = (contentHeight-toolbarHeight-editorBorderTopWidth) + "px";
} else {
toolbar.style.top = "0";
}
});
}
}
});
Also created plugin page on GitHub.
I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
DcpCkEditor.create(document.querySelector(`#${editorId}`), {
...editorConfiguration,
initialData,
}).then((editor: any) => {
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
})
I am trying to add mouse hover function to my axis ticks.
what i want is to show long ticks full text only on hover else it would be showing only few characters . i am adding a hover event to .jqplot-xaxis-tick .But it doesnot even respond to hover.Please suggest !
.jqplot-xaxis-tick {
top: 0px;
/* initial position untill tick is drawn in proper place */
left: 15px;
/* padding-top: 10px;*/
vertical-align: top;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.jqplot-xaxis-tick :hover{
overflow:visible;
white-space: normal;
width: auto;
position: absolute;
background-color:yellow;
}
The hover is not detecting because of the z-index of the canvas which lies on top of the whole chart. I did the following and now it's shorten the tootip by CSS ellipsis and show the tooltip with full name on hover.
Based on the Gyandeep's answer, the exact JS and CSS I used are,
Javascript:
$('div.jqplot-xaxis-tick').each(function (i, obj) {
$(this).prop('title', ($(this).text()));
$(this).css('z-index', 999); // this is important otherwise mouseover won't trigger.
});
CSS:
.jqplot-xaxis .jqplot-xaxis-tick {
position: absolute;
white-space: pre;
max-width: 92px; // Change it according to your need
overflow: hidden;
text-overflow: ellipsis;
}
The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.
I managed to add a tooltip kindof feature to axis ticks.When I hover upon them it shows a separate box with full text else only 3-4 characters are shown.
The code is something like this
$($('.jqplot-xaxis-tick')[i]).bind('mouseover', function () {
// var m= '-webkit-marquee';
$($('.jqplot-xaxis-tick')[i]).css('white-space','pre-line');
$($('.jqplot-xaxis-tick')[i]).css('overflow','visible');
$($('.jqplot-xaxis-tick')[i]).css('width','auto');
$($('.jqplot-xaxis-tick')[i]).css('position','absolute');
$($('.jqplot-xaxis-tick')[i]).css('background-color','#666666');
$($('.jqplot-xaxis-tick')[i]).css('color','white');
$($('.jqplot-xaxis-tick')[i]).css('top','-45px');
// $($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
// console.log($($('.jqplot-xaxis-tick')[i]).text());
}).bind('mouseout', function () {
//var m= '';
//$($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
$($('.jqplot-xaxis-tick')[i]).css('white-space','nowrap');
$($('.jqplot-xaxis-tick')[i]).css('overflow','hidden');
$($('.jqplot-xaxis-tick')[i]).css('width','50');
$($('.jqplot-xaxis-tick')[i]).css('background-color','');
$($('.jqplot-xaxis-tick')[i]).css('color','grey');
$($('.jqplot-xaxis-tick')[i]).css('top','0px');
});
Here's the solution I'm using to display monthly high and low temperatures. Hovering over the x-axis tick will display an alert with the active month name and temps.
// Set up hover function
$('#monthlyTemps .jqplot-xaxis-tick').hover(function () {
setActiveColumn($(this));
});
// Set active column
function setActiveColumn(sender) {
// Display values
var monthName = sender.text();
var monthIndex = monthNames.indexOf(monthName);
var monthLowTemp = getMonthLowTemp(monthIndex);
var monthHighTemp = getMonthlHighTemp(monthIndex);
alert(monthName + ': ' + monthLowTemp + ' / ' + monthHighTemp);
}
// Get month low temp
function getMonthLowTemp(monthIndex) {
var value= $("#monthlyTemps .jqplot-point-label.jqplot-series-0.jqplot-point-" + monthIndex).text();
return value;
}
// Get month high temp
function getMonthlyHighTemp(monthIndex) {
var value= $("#monthlyTemps .jqplot-point-label.jqplot-series-1.jqplot-point-" + monthIndex).text();
return value;
}
var monthNames = new Array(12);
monthAbbreviations[0] = "Jan";
monthAbbreviations[1] = "Feb";
monthAbbreviations[2] = "Mar";
monthAbbreviations[3] = "Apr";
monthAbbreviations[4] = "May";
monthAbbreviations[5] = "Jun";
monthAbbreviations[6] = "Jul";
monthAbbreviations[7] = "Aug";
monthAbbreviations[8] = "Sep";
monthAbbreviations[9] = "Oct";
monthAbbreviations[10] = "Nov";
monthAbbreviations[11] = "Dec";
I am learning Sass but a bit stuck trying to work something out. I'd like to have a unique background image and header image on different pages. How can I perhaps extract the body class name form the markup and interpret that in scss?
Essentially I require some way to prevent having to do this (which is totally the point of scss right?!)
body.page1 {
background: url(../img/bkg-page1.png) left top repeat-x;
header {
background: url(../img/header-page1.png) center top no-repeat;
height: 320px;
}
}
body.page2 {
background: url(../img/bkg-page2.png) left top repeat-x;
header {
background: url(../img/header-page2.png) center top no-repeat;
height: 320px;
}
}
I realise using variables is the right direction, but not sure how to relay the markup class to the scss.
Any pointers would be most appreciated.
What you're looking for is an #each loop:
#each $class in (page1, page2, page3) {
body.#{$class} {
background: url(../img/bkg-#{$class}.png) left top repeat-x;
header {
background: url(../img/header-#{$class}.png) center top no-repeat;
height: 320px;
}
}
}
This assumes that the class name corresponds to the image name, as indicated in your sample.
body.page1 {
background: url(../img/bkg-page1.png) left top repeat-x;
}
body.page1 header {
background: url(../img/header-page1.png) center top no-repeat;
height: 320px;
}
body.page2 {
background: url(../img/bkg-page2.png) left top repeat-x;
}
body.page2 header {
background: url(../img/header-page2.png) center top no-repeat;
height: 320px;
}
body.page3 {
background: url(../img/bkg-page3.png) left top repeat-x;
}
body.page3 header {
background: url(../img/header-page3.png) center top no-repeat;
height: 320px;
}
You could use a #for loop instead (which eliminates the need for the list of class names) if your class names are always going to have numbers at the end of their name.