I'm working on a project I've inherited. Problem is, when compiler generates sprites, name contains some random string at the and, I want to change that to something like version of project, so for example if i have sprite of "home" I want to have home-v1, for version 1 and so on.
I've tried to edit config.rb and add some code there, but I was un-successful.
So what i basically want is this: When i run compass compile, to get sprites with name like "home-v1.png" and when i run compass clean, to clean "home-v1.png", Also i want to do something like this, if i change version variable, so for example its not "home-v1.png", now its "home-v2.png" all old sprites (home-v1.png") should be removed.
Related
I haven't dabbled with animated gifs for a very long time. I'd like to create something similar to this:
https://dribbble.com/shots/2941889-Wind
I can't imageine whoever created this animated frame-by-frame to get that result. So i'd like to know what tools there are for doing something like that? Or perhaps i'm all wrong and the only way to do it is frame-by-frame?
Just some advice where to get started if anyone is able.
So what i did in the end was use Adobe Illustrator to create the paths.
I then changed the stroke to dashed. Modifying the dash i was able to make it appear as thought the line was growing along the path. I then created more paths.
I then created a js file to incrementally increase the dash and save a gif. This created me over 100 snapshots.
Imported these into Adobe Photoshop and export! Bingo!
As I added webpack to my NativeScript iOS app to bundle it in preparation for release, I discovered that the various some-page.minWH600.css "qualifier" files I was using to target different screen resolutions are no longer loading. (See NativeScript docs for supporting multiple screen sizes using qualifiers)
I then refactored a bit to test for small vs medium vs large tablet screens, planning to add a .css file programmatically via...
if (mediumScreen) page.addCssFile(app.minWH600.css);
...but discovered due to the bundling of pages in webpack, page.addCssFile() doesn't work either.
Does anyone have another solution to add css classes to support different screen resolutions that works with webpack?
I can think of the obvious: using many getViewById() calls and adding either NS/js properties and or css styles (or a css class) to each view, but that's laborious and kludgey...
I'd prefer to somehow redefine the relevant css classes on the fly like I was able to before bundling with webpack, but I don't know if that is possible?
To answer my own question, because someone else may have to solve this someday, I came up with two workarounds.
Simply redefining the class using:
if (mediumScreen) page.addCss(".class {font-size:18 }, .class2 {font-size: 14}");
Oddly enough that works, even though page.addCssFile() does not. The disadvantage is that the css presentation is buried in the code and this is less maintainable.
By using the "nativescript-dom" plugin to gather all the views by class and defining a function to add ".classTablet" to all views containing ".class", I was able to keep all the css together in one css file for easier maintenance. I simply added the class for the larger screen size to that file and use:
if (tabletScreen) addSizeClass("welcomeButton","welcomeButtonTabletSize");
which calls the global function:
require("nativescript-dom"); // must install this nativescript plugin
addSizeClass = function(className, newSizeClassname) {
// note page is a global variable and is set in onNavigatedTo
var items = page.getElementsByClassName(className); //getElementsByClassName() is from nativescript-dom plugin
items.forEach((item) => { item.className += " " + newSizeClassname; }); //define and maintain a new size class in app.css
}
Of course, better yet might be configuring NativeScript webpack to be smarter. But I am no webpack configuration guru.
I made a bitmap font using Hiero, called default.fnt and default.png. I can use these as a BitmapFont in LibGDX, and draw text with the font without problems, using font.draw(). But I can't use this font as the default font in a Skin. I've used the uiskin.json file from here(along with the rest of the skin, but I deleted the Droid Sans files before making my own font), because I have no idea how to make one of my own. From what I've read on the Internet, the .json file is correctly set up: it has the line com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } }, which should make the default.fnt the default font for widgets that use the skin. Still, when I run the program, I see this:
There should be a label above the buttons, and the buttons should have text.
If I do this: startGameButton.getStyle().font = font;, where startGameButton is one of the buttons, and font is the BitmapFont created like this: font = new BitmapFont(Gdx.files.internal("uiskin/default.fnt"), Gdx.files.internal("uiskin/default.png"), false);, the buttons shows the text properly. I don't want to do this since it feels too much like a hack.
I'm following this tutorial, but I've had to look some things up in later revisions of his code, because LibGDX has changed since it was written.
MenuScreen.java(the screen where there are problems)
AbstractScreen.java
Also please tell me if there's a better way to make the menu UI, or if you need other files. The uiskin.json is linked above.
Thank you.
I fixed it. The Droid Sans bitmap image existed in two places, it was part of uiskin.png too. I don't know how, but it probably read the font's letters from that file instead of default.png. So in the end I just renamed the font's .fnt and .png(and the file parameter in the .fnt) and did a search-replace inside the skin's .json, and it all works fine now. I don't know exactly what caused it, but maybe default-font is a reserved word or something.
Anyway, it works now. Thanks to Jyro117 for making me think maybe I shouldn't replace the default but add my own font.
I am trying something rather basic in Sphinx. I have some images, but I prefer to keep them pretty small, and I want to allow the user to click on them to get the larger image.
I do not find a syntactic way to combine image: or figure: with ref: or link:.
.. image:: _static/my_image_small.png
and I have in the same folder my_image_large.png.
If you come up with a solution, should the larger image just be a file with an explicit link to it or do I create a reSt file with an additional image: tag?
An alternative could be to play with the image sizes in the reSt file, but then I still do not know how to create the link from the small image to the large image.
Thank you for helping me.
Just use the target directive. You would end up with something like:
.. image:: _static/my_image_small.png
:target: _static/my_image_large.png
It is not strictly necessary to use the references to the static folder in your source. They will be copied to the _images folder anyway when you build the docs (so you will have them twice in your builds, without needing them there).
I always use a folder called figures next to the source folder where I manage the images. The my_image_large.png files, however, you would want to place in the _static folder as the contents will be copied on build.
I use Sphinx to generate some docs. I have a reStructuredText document and I'd like to put an image into it. The case is that the image should be clickable so that after a user clicks the image then they should be shown this image in full size. I use the image directive and its target option like this:
.. image:: /images/some_image.png
:alt: Image descripion
:align: center
:target: `big_some_image`_
.. _big_some_image: /images/some_image.png
The problem is that in the rendered page I get:
<img src="../../../_images/some_image.png">
So there is correct src from the image directive but an incorrect href attribute from the hyperlink.
Questions:
is there any way to generate links in the way that image directive does it? I mean relative to the document.
is there any other (built in) way to have "thumbnail-> click -> big image" behaviour?
Simply use the scale option:
.. image:: large_image.png
:scale: 20%
When the scaled image is clicked on, the full image loads in its own window. So this doesn't increase the image size on the page, but that would be messy anyway.
When you use the image directive from within Sphinx, Sphinx does some special handling to find the image file and copy it into your project (like your _images directory), and then renders the HTML to point to that place.
But the target option just takes a URL as a parameter. It knows nothing about your Sphinx project, or how your images are laid out, and does not attempt to guess.
If you want to have it point to a larger version of the same file, you will likely need to do some manual steps (like maybe copying the file to a specific location), or maybe provide a relative URL to the large file, rather than the absolute URL you have in your example.
If you want to go a completely different way, you could also try overriding and modifying the HTML templates for your project to add some JavaScript to get the click-to-larger-image effect you want.
Looks like there is a Sphinx extension that does this now, and quite nicely at that, sphinxcontrib-fancybox 0.3.2. Install with pip, add it to your extensions in conf.py, and use the fancybox directive:
.. fancybox:: images/image.png
Relative links seem to work. For the Mapserver docs setup, if an image is placed in the images directory, a relative link like in the following code works in my local build. Here is an example using figure (the underscore ("_") before "images" in the target link is necessary):
.. figure:: ../../images/carto-elements.png
:height: 400
:width: 600
:align: center
:target: ../../_images/symcon-overlay.png