I was under the impression that 'backgroundIamge' is supposed to be supported in .setStyleAttribute to allow the user to set a background image in a panel via something like this:
setStyleAttribute("backgroundImage","url('myImageUrl')");
However, when I try the following:
var panel = app.createVerticalPanel().setId('panel')
.setStyleAttribute('text-align', 'center')
.setStyleAttribute('zIndex', '3')
.setStyleAttribute('position', 'fixed')
.setStyleAttribute('left', 10)
.setStyleAttribute('top', 10)
.setWidth(250)
.setHeight(150)
.setStyleAttribute('backgroundImage',"url('https://myImage.png')");
I cannot produce a background image in the panel. The funny thing is the exact same code will produce a background image in a button. I have tried 'background' and 'background-image' as well to no avail. Is 'backgroundImage' NOT supported for panels or am I missing something?
I figured it out...you need to use createAbsolutePanel or add an empty label to other types of panels.
Related
I have Matlab 2019b, GUI Layout Toolbox 2.3.4 and t all runs on MacOs 14 Mojave.
I want to create button in in a UI that have icons/images instead of text. I have seen here:
https://undocumentedmatlab.com/blog/html-support-in-matlab-uicomponents/
that it is supposed to be possible to use HTML to render the button contents.
So - I try this sample code:
figure('MenuBar','none','Name','GUI-TEST','NumberTitle','off','Position',[200,200,140,90]);
push_btn = uicontrol('Style','PushButton','String','Push','Position',[30,60,80,20],...
'CallBack','disp(''You are pressed a push button'')');
close_btn = uicontrol('Style','PushButton','String','Close','Position',[30,5,80,50],...
'CallBack','close');
icon_file = fullfile(pwd, 'close.png')
str = ['<html><img src="file://' icon_file '"></html>']
set(close_btn,'String',str);
but it leaves me with an empty button.
If I deliberately use a filename that does not correspond to an existing file, I see a broken image icon:
So I am reasonably sure that the basic syntax and file path stuff is correct but the image does not get rendered in the button.
Is there something else I need to do to make this work or is it all just part of Matlab's overwhelming strangeness?
The easiest way to put an image on a uicontrol (and specifically a button), is to use the CData property,
im_orig = imread(icon_file); % Needs to be true color, i.e. MxNx3
im_sized = imresize(im_orig,[80,50]); % size of the button
% str = ['<html><img src="file://' icon_file '"></html>'];
% set(close_btn,'String',str);
set(close_btn,'CData',im_sized);
I need that when a user click a button. The dress changes. There are separate files for the dress and the body.
I added a custom code on a tap/click event on GWD which is this
document.getElementById("body").src = "Skin-Fair(Ivory).png";
document.getElementById("body").source = "Skin-Fair(Ivory).png";
What happens is that there is a placeholder when I click the button but it never makes the intended image appear.
This is a minimum example of how to change an image source with a button.
I strongly recommend you take a basic web dev course: https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer
document.getElementById('bt').addEventListener('click', function () {
document.getElementById('im').src = 'https://placeholdit.imgix.net/~text?txtsize=18&bg=FF6347&txtclr=ffffff&txt=New-Image&w=250&h=50';
});
<button id="bt">Button</button>
<img id="im" src="https://placeholdit.imgix.net/~text?txtsize=18&bg=FF6347&txtclr=ffffff&txt=Placeholder-Image&w=250&h=50">
No coding skills required for that using GWD.
I assume you have imported all your images in GWD project.
You should use the timeline and create two different keyframes.
Set the opacity to 0 to hide the unwanted assets in your keyframes.
Add an event on tap/click and set it to go to the keyframe/page you want.
Using Ctrl-F in most browsers will allow you to search for text, but only in only the text areas. I would like to search for text in what should be accessible areas that are not necessarily text rendered areas such as <map ...><area title="searchable text" /></map> and <img alt="searchable text" />. Is there a browser or addon that will do what I'm asking for? This stuff is here for accessibility, but it doesn't seem to be really all that accessible (except by mouse hover, which again isn't all that accessible).
NOTE
An answer that is required, does not use something that is decoupled from the view. I.e. searching through the source code isn't an option as this is largely difficult to read (esp on complex pages) and doesn't show where the information is located on the rendered page.
Is there a browser or addon that will do what I'm asking for?
Oh yes. Lynx browser does it.
But I guess it's not a solution ;-)
If your question is so, there is no way to override what CTRL+F is doing in your browser.
You can design a custom plugin inside your website, or an addon for your browser. This would be quite easy... but will require other shortcut.
If your main problem is to locate tags based on their alt or title attributes content, this is quite easy in javascript:
var search='enter image';
var nodes=document.querySelectorAll("[alt*='"+search+"'],[title*='"+search+"']");
You can then highlight the matching nodes using jquery or what you want.
for (i in nodes) {
nodes[i].className+=' resultHighlighted';
}
and scroll to the first result:
nodes[0].scrollIntoView();
If you intend to create a browser plugin, you can create your custom a bookmarklet or a custom plugin, and associate a shortcut to this bookmark (see https://github.com/iSunilSV/Chrome-Bookmark-Shortcut)
A simple bookmarklet to find the first match by title or alt attribute and scroll to it will be something like that:
javascript:text=prompt("search inside alt or title attribute");
document.querySelector("[alt*='"+text+"'],[title*='"+text+"']").scrollIntoView();
In your browser, use the "View Source" or "Source Code" function, and then within that window that pops up, use the Ctrl-F for Find.
You can also use the "Inspect Element" directly on an element to split the screen into two windows- one for code and one that's rendered.
For more information, here's a sample article for Chrome:
https://support.google.com/adsense/answer/181951?hl=en
Would something like the Web Developer browser plugin work? It's available for Chrome, FF and Opera. There are a few features that toggle the display of various attributes such as title, alt and even ARIA roles. This injects the attribute text inline with the element.
In my opinion, it's not a bug; they were just not designed for this use.
As I'm sure you are aware, the alt attribute replaces the image when it's not available. So how could you scroll to something that is not always displayed? Whereas you seem to be after a permanent description; a figcaption would be more appropriate for this.
As for the title attribute, it was intended to merely clarify the purpose of a link. There should not be any new information to the user in the title; therefore I think it would be redundant to have two lots of the same information highlighted in one place.
The purpose of searching is to find text on screen, seeing as neither title or alt are always displayed I think the user would be more confused by the fact that nothing is highlighted, and that they are just taken to an image or random link/area. If the image has a figcaption that becomes highlighted, then it would make sense to them. Besides, how are they going to search for the title if they don't know what to search for? Title and alt do not come up in text displayed by search engines; the user will never know about it unless they've been to your site before, in which case they'll know where to look.
Also you state the following:
This stuff is here for accessibility, but it doesn't seem to be really all that accessible
Which, understandably, seems true to you as you probably do not need it. However alt and title are read out to those who use screen readers so isn't entirely useless.
Idea 1
I assume you have Windows and Firefox installed
I have my Firefox installed with 2 add-ons.
Install a add-on called Tile Tabs, it make it possible for example left side is web view and the same page on right side with source code.
Install add-on called Web page to source code & viceversa that make it possible to toggle between view and source code by pressing on CTRL+SHIFT+S
Since what you required is not a default thing in all nowadays browses as far as I know.
Screen shot of the solution:
Idea 2
Install FireBug, you can view/edit/debug source codes and view HTML live and what you highlight on the code will be also highlighted on the view.
Screen shot:
Note: Btw idea 1 is not only good for view / source code but it is also good to compare two views or read article to the right and answer question to the left.
You can use the search funktion in Chrome's developer tools "Elements" Tab (Press F12 -> Tab "Elements" -> Press CTRL + F) and use XPath on your searches. Example:
//*[#title="Google"]
Matches will be shown with a yellow background in the code and when you hover it, its position will be hightlited in the view.
Dev Tools "Element" Search with XPath
It is coupled with the view, allows you to see the element's position and it's also an out-of-the-box solution in Chrome (tested in Chromium 45 for Ubuntu).
Hope it helps!
Regards
EDIT
Forgot - If you want to use wildcards on your searches, you can also do it like this:
//*[contains(#title, 'Google')]
EDIT 2
For the posterity! Further research shows that your goal might be possible to achieve using the Firefox-Addon Greasemonkey, which allows you to customize the way a web page displays or behaves, by using small bits of JavaScript.
I performed several tests with this addon and could achieve a nice effect with simple images (display the ALT attribute as a DIV overlapping the image), but with area sections the thing gets a lot more complicated, as area regions can be squares, circles, and polygons with infinite coordinates plus retrieving the exact positioning of the area itself can be a bit tricky but maybe gives you or someone else a start point.
Based on the ALT Tooltips Script (http://greasemonkey-user-scripts.arantius.com/alt-tooltips-for-firefox), I created the following script and defined it in Greasemonkey:
// ==UserScript==
// #name Alt Tooltips 2
// #namespace http://www.biterion.com
// #description Alt Tooltips 2
// #include *
// #grant all
// ==/UserScript==
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
function getAreaPosition(element) {
var position = element.coords.split(',');
xPosition = position[0];
yPosition = position[1];
return { x: xPosition, y: yPosition}
}
var res = document.evaluate("//img",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i, el;
for (i=0; el=res.snapshotItem(i); i++) {
if(el.alt) {
alternate = el.alt
} else {
alternate = "No alt text";
}
position = getPosition(el);
var newDIV = document.createElement ('div');
newDIV.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position["y"] + ";left:" + position["x"] + "' id=" + i + ">" + alternate + "</div>";
document.body.appendChild(newDIV);
}
var res2 = document.evaluate("//area",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i2, el2;
for (i2=0; el2=res2.snapshotItem(i2); i2++) {
if(el2.alt) {
alternate2 = el2.alt
} else {
alternate2 = "No alt text";
}
position2 = getAreaPosition(el2);
var newDIV2 = document.createElement('div');
newDIV2.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position2["y"] + ";left:" + position2["x"] + "' id=" + i2 + ">" + alternate2 + "</div>";
document.body.appendChild(newDIV2);
}
As you can see, the script firstly detects all "img" and "area" elements, extracts its positioning and creates a new DIV element containing the "alt" attribute, which is then positioned on the upper left corner of the image.
As stated, the problem with areas is, that the positioning should be relative to the parent image and not absolute like in the script, plus the coordinates should be extracted accordingly to the type of area shape (currently only extracting the two first coordinates of each area, which will work for squares but will surely fail for other shapes).
Hope this will help someone :-D
Regards
following Code...
<!--Navigation-Bar-->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" ForegroundColor="White" IsMenuEnabled="True" BackgroundColor="#002B55">
<shell:ApplicationBarIconButton Click="B_Search_Click" IconUri="Images\Pic_Search.png" Text="Search"/>
<shell:ApplicationBarIconButton Click="B_Media_Click" IconUri="Images\Pic_Media.png" Text="Media"/>
<shell:ApplicationBarIconButton Click="B_Scan_Click" IconUri="Images\Pic_Scan.png" Text="Scanner"/>
<shell:ApplicationBarIconButton Click="B_Charts_Click" IconUri="Images\Pic_Charts.png" Text="Charts"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Click="B_Logout_Click" Text="Logout"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
gives me following ApplicationBar...
http://s14.directupload.net/file/d/3341/4xiadbvz_jpg.htm
(Solid background when expanded)
BUT if I create the AppBar in CodeBehind like this...
private void ResetApplicationBar()
{
ApplicationBar = new ApplicationBar();
ApplicationBar.BackgroundColor = Color.FromArgb(150, 0, 43, 85);;
ApplicationBar.ForegroundColor = Colors.White;
ApplicationBar.Opacity = 1;
ApplicationBarIconButton B_Search = new ApplicationBarIconButton();
B_Search.IconUri = new Uri("/Images/Pic_Search.png", UriKind.Relative);
B_Search.Text = "search";
ApplicationBar.Buttons.Add(B_Search);
B_Search.Click += new EventHandler(B_Search_Click);
(more Buttons...)
then I get that misterios unchangable Transparency...
http://s1.directupload.net/file/d/3341/zjo57e37_jpg.htm
(Half-Transparent when expanded)
How can I change the Background to solid???
-Yes I have mostly overwritten the theme
-Changing global colors doesnt work
-changing background/foreground doesnt work
-changing opacity doesnt work...
I need to generate it from code behind because im changing it dynamically in one window
(or is it possible to define multiple AppBars in markup?)
Thanks in advance!
Please try this one
ApplicationBar.BackgroundColor = Color.FromArgb(52,0,2,181);
ApplicationBar.ForegroundColor = Colors.White;
You will get the same color in designer page by this way.
This (52,0,2,181) is the conversion value of #002B55
On a fresh project, everything seems fine, here.
"- changing background/foreground doesnt work
- changing opacity doesnt work..."
Using the Application Bar sample, you provided in XAML, but with Opacity=0.5, I get this :
After I click the "Change Color" button, which does ApplicationBar.Opacity = 1;, I get this result :
(The background image is slightly moved up, because in first case we provided an opacity and in the second there was none explicitly specified and it seems the app bar didn't layered over the image, but to fix this you can set an Opacity=0.999, close to 1).
It must have something to do with all the theme overwriting you have done or some customization you attempted.
If this isn't quite helpful, provide me more details and I'll try to help as I can.
Thank you very much for effort, but changing opacity didnt to 0.999 didnt help either.
I found a solution!! And its quite simple :)
I Just take the old bar instead of creating a new one:
//Old Code
ApplicationBar = new ApplicationBar();
//New Code
ApplicationBar.Buttons.Clear();
ApplicationBar.MenuItems.Clear();
Hope it helps someone!
I tried to find the solution but can't. I need a custom image for Pinterest (Pin It) button and pin some custom image by url but not a current page.
I created a custom link:
Pin It
in style I set the background image but I see only default Pin It button and not my custom button
There are some solutions where you can set custom button image for Pin It button but I can't change the media={ImageURL} in those solutions.
The popular solution is
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>
But it doesn't help me. Does any one know the solution?
Indeed the popular solution by Jeremy Mansfield at www.brandaiddesignco.com has a great method to customize the Pinterest button any way you want!
I've made three examples, in the form of jsFiddle's, so you can see how it's done using that method.
Reference: jsFiddle Text-Link method
Reference: jsFiddle Custom Logo method
Reference: jsFiddle Custom Logo and Image method
For more Pinterest Info, see my other SO Answer.
Adding an encoded whitespace before the last fragment of the URL will prevent Pinterest's JS from "hijacking" the link:
//pinterest.com/pin/create/%20button?url=
Update:
It seems that my previous solution doesn't work anymore. Here is another one:
//pinterest.com/pin/create%2Fbutton/?url=
At the risk of over simplifying things, use your 'http://pinterest.com/pin/create/button/?url=' path that you've already got, set up your variables, and append them as you do, and just don't include any pinterest javascript. Without that js, it won't find the link and replace it out with their own pinterest button. Just customize your link with an image inside it (or set a background image or whatever) and screw the pinterest js. Set the target to open in a new window.
Custom Link/Button looks like this:
<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt">
Custom Pin it image or text here!
</a>
Note: I don't think the data attributes need to be encoded (like I did for data-image) but it doesn't seem to hurt it.
JQuery:
$('.btnPinIt').click(function() {
var url = $(this).attr('href');
var media = $(this).attr('data-image');
var desc = $(this).attr('data-desc');
window.open("//www.pinterest.com/pin/create/button/"+
"?url="+url+
"&media="+media+
"&description="+desc,"_blank");
return false;
});
Here is what worked for me :
<img src="../img/custompinint.png" />
The attribute data-pin-custom is what I picked up from Pinterest documentation.
Hope this helps.
After a bit of trial and error, below is what worked for me. This response is a combination of #rharvey's response thread and another stack overflow post. This solution opens up a pop up to share content via pinterest.
Note: In order to prevent 2 windows from popping up you need to set a target. Below is the full solution:
<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt" target= "pinIt">
Custom Pin it image or text here!
</a>
<script>
$('.btnPinIt').click(function() {
var url = $(this).attr('href');
var media = $(this).attr('data-image');
var desc = $(this).attr('data-desc');
window.open("//www.pinterest.com/pin/create/button/"+
"?url="+url+
"&media="+media+
"&description="+desc,"pinIt","toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320");
return false;
});
</script>
Works for me perfectly.
Your script
<script>
function pinIt()
{
var e = document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
}
</script>
Call it with
Pin