I have created a symbol in Edge Animate, which contains a rectangle as view area and an image and text as contents of that view area. I want to set text and image src before I start the animation of the symbol. So when a certain area is clicked, I can set "Text" with
var thing = sym.getSymbol("mySymbol");
thing.$("Text").html("I can set some text here to change the content of Text.");
Question now is, how I can set the image source for the item "Image" within that symbol. I have looked into the files Edge Animate creates, and the text as shown above is in a field called "text", while the name of the image is contained with other information in a field called "fill". I don't have a clue how to set the image source. Any pointers?
Thanks in advance
M.
Here's a solid solution, which I've been working out over the past few hours.
General
The first step is to get a reference to the element, for example, if the element is named "MyTextBox", you would address it like this:
$(sym.lookupSelector("MyTextBox"));
Dynamically Changing Text
To do this, you can set the HTML property for the referenced element:
$(sym.lookupSelector("MyTextBox")).html("Hello World");
Dynamically Changing Images
Images are implemented by using the background-image CSS property of a DIV. If you had an image element named MyImageBox, the syntax would be:
$(sym.lookupSelector("MyImageBox")).css('background-image', [image]);
There's a second part, which is getting the [image] reference correct.
If it's in the default Edge images directory, use the relative URL:
images/MyNewImage.png
Use standard syntax for CSS background-image:
url(images/MyNewImage.png)
one approach might be to append an img tag and define its source.
for example:
$('<img src="mypic.png">').appendTo($('Text'));
replace "mypic.png" with the path for the image you want to use.
hope this helps.
Related
So, for an Image in react-native, one can set alignSelf in a StyleSheet or one can use resizeMode in the Image tag. What's the difference in usage?
My understanding of it is, that you have to mentally separate the View - or 'box' in css box model terms - and the rendered image it contains. All the styling you define applies to the box. The resizeMode determines how the actual image data is rendered into that box.
AlignSelf defines how the image is placed within the parent container and makes possible to override the align-items value for specific flex items.
ResizeMode is similar to css object-fit and defined how the image should fill its own container.
I am developing a win32 application and I want to use my own images instead of default + and - signs in tree view.
I also found here that I can use images in four cases-
1)An image, such as an open folder, displayed when the item is selected.
2)An image, such as a closed folder, displayed when the item is not selected.
3)An overlay image that is drawn transparently over the selected or nonselected image.
4)A state image, which is an additional image displayed to the left of the selected or nonselected image. You can use state images, such as checked and cleared check boxes, to indicate application-defined item states.
I found some examples like this one(uses state images) but it seems it is not related to my query.
But I can't find how to replace default + and - signs of tree view with my images.
Please help me out of it. Thanks in advance.
The "expansion" buttons are not drawn using an assigned image list; instead they come from the current theme (or in XP/non-themed, are hard-coded glyphs).
The only way to customize them is to use Custom Draw and draw the tree items yourself.
I'm new to the site, but I'm looking into creating a very simple code which from a small collection of images, changes the photo by clicking on the right hand side of the image for "next" and left side for "previous". Ideally allowing space underneath to include text and an option of an independent text link to change the image. Best way to describe what I'm searching for is something exactly the same as this http://rowingprojects.com/cabinet/florian-roithmayr-the-y
Can anyone help? I would very much appreciate it. Thank you.
You need for this: HTML, CSS and Javascript.
In HTML:
You put down all images which you want to slide, and give them an id. Hide all, in HTML code with style's display attribute.
You need to add 2 transparent block which is always above the image left and right side. You can do this, with using CSS position, z-index, top, and left attributes. Give this elements onmouseclick and the correct JS function (nextimage, previousimage).
In JS:
You need a var, which contains the actual picture number in the array.
You need an array, with image ID's.
You need a nextimage and previousimage, which show and hide the images with styile's display attribute, these using that array and var.
If you want a title or/and description for the image, you only need to put that image in a div and formating whatever you want. But in this case you need to add id to the div not to the image. Or you can change the title/description with using JS.
I was looking for a custom image grid and found a similar question that had a really sweet component in an answer.
I downloaded the code and after some fiddling, I managed to get it to compile in DXE2. It looks really cool, but I can't get either scrollbar to show up. I also can't figure out how to dynamically control the images displayed. Or how to update the grid based on keyboard events.
Also, to get it to compile I had to remove the GR32 references; the library I downloaded had too many incompatibilities with DXE2 for me to resolve.
Any help would be greatly appreciated. This really looks like a killer component.
Update from Bill:
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question.
If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better. Any idea on what is going on?
... but I can't get either scrollbar to show up.
Well, there is no horizontal scrollbar. There is the property ColWidth that controls how much images are drawn in one row, depending on the control's width. You might update ColWidth in an OnResize event handler due to anchor settings, for example.
The vertical scroll bar appears automatically when not all images (incl. spacing) fit in the clientrect. The images are drawn on a TPaintBox and that paint box' size is updated as soon as the image count changes:
procedure TImageGrid.RearrangeImages;
begin
...
FPainter.Height := Max(ClientHeight,
FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing);
The component inherites from TScrollingWinControl, so the scroll bar should modify accordingly. If not, then Bill has a workaround found as commented:
VertScrollBar.Range := FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing;
I understand this obviously also works, but I really wonder why the scroll bar's range should be modified manually. Here in D7 I have no problem with a hidden vertical scroll bar.
... I also can't figure out how to dynamically control the images displayed. ...
The most easy way to fill the component is by assigning the Folder property to a path with images. Only the images with the file formats in the FileFormats property will be loaded. To specify the images manually (e.g. to combine multiple folders), use the FileNames property. When the Folder property is set, then the FileNames property is updated accordingly, but those file names are not stored in the DFM. When you change the file names (e.g. you delete one from the folder), then the Folder property is cleared and the component uses the FileNames property instead.
... Or how to update the grid based on keyboard events. ...
The only keystrokes currently implemented are Up, Down, PageUp, PageDown, Home and End which all scroll the control. What more key actions do you wish? It's a viewer.
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question. ... If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better.
While loading the images, a temporary rect is drawn with size ColWidth * RowHeight. All images are stretchdrawn within that size, so adjust your ratio of these properties to make the spacing equal everywhere. Note that you can also influence appearance with the ImageHorzAlign and ImageVertAlign properties.
Update:
The component you refer to is recently completely rewritten, and some of the answers above are outdated.
It now has a Propertional property that defaults to True, but when set False, it will stretch up the thumbs to whatever cell size you have set, independent from the original image sizes. Small images could remain narow though, unless you set the new Stretch property to True.
It now distinguishes between RowHeight and CellHeight, and ColWidth and CellWidth. The difference between both is CellSpacing.
The component does not descend from TScrollingWinControl anymore, but from TCustomControl and only the vertical scroll bar is added.
I'm using stylish to modify a website and I have this div full of text the needs to be moved upwards. The problem is the surrounding div has overflow-y:hidden to prevent text from flowing down the page. How can I allow overflow up but not down.
P.S. I know the css properties I used in the title don't exist, although if they did the style would already be done.
I needed to same, I found out you can just use clip, it's a very handy css property that isn't very much known. It does exactly what you want, you can shape the dimension of a div to your liking. With clip you for example can do something like
<div id="myBox" style="clip: rect(10px 100px 100px 10px);">This is some text to play with so you can see it is clipped.</div>