How would i add a custom icon with a given name to my nativescript project using the tns resources generate icons-command
$tns resources generate icons ~/myfolder/myspecialicon.png
Say i want the command to place the icon(s) in the correct folders maintaining the name myspecialicon.xxx instead of just overwriting the default icon.png?
Cheers
Lasse
That only generates the app icon. To generate other icons (and other image assets, really) I recommend the online tool http://images.nativescript.rocks/.
It generates assets for both Android and iOS. All you have to do is grab the result and merge it into your project's App_Resources. I know it is not ideal but it's the best workflow I found so far.
Related
I can't find how to load my own icons in Flet.
I'm testing Flet with the intention of making a desktop app (pure desktop, not Internet needed), but I'm not able to use my own icons to begin with. I can only use the ones that come inside ft.icons, but I'd rather use my own by loading them from a folder similar to /assets/icons. Can I do that? How?
Thanks.
Currently, I don't see a way of doing this; however, you could use the Image class instead.
I would suggest you create an assets folder under your main project folder.
Let's assume you have the following folder structure on your project:
/assets
/icons/my-icon.png
main.py
When you are running your app, you should provide that folder to the initializer in the following way:
flet.app(target=YourApp(), assets_dir="assets")
Then you can access your images there directly and create an Image instance in the following way:
test_image = flet.Image(src="icons/my-icon.png", width=32, height=32, tooltip="Image Tooltip")
You can nest these Image controls inside of anything you want, so you have a lot of flexibility.
The only downside of doing it this way is if you are using light/dark themes on your app. Compared to the Icon class, you will have to specify the light/dark theme versions yourself and update them manually when you are switching your theme.
Here is the official documentation
I am using ng2-pdfjs-viewer to display the pdf document. I use Angular version 12. I am able to customize its style in the viewer.css file under assets/pdfjs/web/viewer.css.
The design library which i am using in my project is carbon design system. I am trying to make use of the carbon components like search icon/arrow icon. I cannot get it working since i have the css and html files under the assets folder.
i am able to use carbon components in all other components but not in the files under assets folder. Is there a way to achieve this?
Any help/suggestion is appreciated! Thanks
I figured out the answer! I had to have the carbon icons under assets/pdfjs/web/images and made use of those in the app. Problem solved.
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
I have setup a QnA Bot via the Azue BotService, and I want to use the WebChat channel, but the default MS Design for the chat interface is quite bland; is there a way for me to edit it?
Is it possible to go form the default theme on the left, so something like Air New Zealand's bot on the right in the image below?
It depends on how you want to integrate the webchat in your page but yes it is possible to change the aspect, it's only css and js
All the details are provided on the GitHub account for the Webchat: https://github.com/Microsoft/BotFramework-WebChat
In a few words:
Want to run a custom build of WebChat? Clone this repo, alter it, build it, and reference your built botchat.css and botchat.js files.
And for Styling:
Styling
In the /src/scss/ folder you will find the source files for generating
/botchat.css. Run npm run build-css to compile once you've made your
changes. For basic branding, change colors.scss to match your color
scheme. For advanced styling, change botchat.scss.
I see these menu options for my asp.net project beneath the Web Essentials menu:
Create solution settings
Create color palette
Create markdown stylesheet
The official site for Web Essentials doesn't seem to be too forthcoming about just what these options do, or why. Can somebody give me the skinny?
Create solution settings - sets the settings file per solution.
Reason: Many of the options affect the generation of code. Those options should be able to be shared alongside the solution file so all members of a team automatically use the same settings. Also, if the settings are stored alongside the solution, they can be checked into version control.
Create color palette - WE reads and generates UI that shows your site's color pallete, from there you could just pick the colors instead of having to try to remember what the color codes are.
Create markdown stylesheet - I think this one is used for code samples, allows to specify a custom CSS file for the Markdown preview pane