I'm building an electron app, and the above image on the left is how my icon looks in the app when i'm testing it with electron and on the right is after I've compiled it into an executable using "yarn dist".
(these are screenshots of them from my windows bar at the bottom of the screen).
It seems like the resolution of the icon in the executable is worse than in the raw electron app. The file itself is quite high resolution:
The icon is called during development by the "main.js" file:
mainWindow = new BrowserWindow({
// frame: false,
title: "Collector: Kitten " + app.getVersion(),
icon: __dirname + "/logos/collector.png", //<--- This line
webPreferences: {
//contextIsolation: true, //has to be false with the way I've designed this
enableRemoteModule: true,
preload: path.join(__dirname, 'preload.js'),
worldSafeExecuteJavaScript: true
}
})
And is identified by the builder in the package.json "win":
"build":{
"win": {
"target": "nsis",
"icon": "logos/collector.png"
}
}
Is there a way to prevent this loss in resolution when using the electron-builder?
I solved this by converting the .png into a .ico file and using that instead.
Related
I am trying to add custom fonts to my app. I tried everything on the internet but nothing works. However, I think that the only thing that works on React Native 0.70.5 is linking assets using npx react-native-asset.
I tried making react-native.config.jsfile, then using npx react-native-asset. However, it just doesn't give any output and resets the command prompt. I even tried Cmder and Windows PowerShell. Nothing works they all reset.
my react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets'],
};
You have to specify the exect location of the font's TTF or OTF file.
Update react-native.config.js file like this.
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'], // stays the same
};
Put the font files in project>>assets>>fonts folder
After that run command npx react-native-asset
Probabily you will get the results.
I can't change mt app fontfamily. I'd tried so much things from searching in google. I want to change the fontfamily of the app fonts. please help.
below is my added fonts:
Below is the react-native.config.js:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
You are using expo project, You should use this package to load the fonts inside the project
expo install expo-font
I have made a Snack Example of "Sarpanch" custom font working
https://snack.expo.dev/DENUcVd2U
How to add custom fonts in react-native 0.61.x. After 0.60+ added auto linking, I dont know how to link custom fonts.
When I execute this command:
react-native link
This make some aditional linking which generate extra error.
So how Can I Link only fonts folder.
create an assets folder in your project directory and then create a fonts folder and paste any custom fonts that you want then add this code snippet to the react-native.config.js file in the root of your project(if the file doesn't exist create it).
module.exports = {
project:{
ios: {},
android: {}
},
assets: ["./assets/fonts"]
}
after all run react-native link to link the resources to your project.
you will be able to use fonts now. for example, I have a yekan.ttf font in my fonts folder you can use it like this:
const styles = StyleSheet.create({
text: {
fontFamily: "yekan",
},
})
as you see use custom fonts without their extension I mean don't put for example .ttf at the end otherwise, it won't work.
create a file in root (react-native.config.js)
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts'], // stays the same
};
Create a folder called assets in root and paste the font file under fonts
folder(assets/fonts/xxxx.ttf)
Run npx react-native link in command line.
You can add custom font in react-native using expo-font.
Install >> expo install expo-font
import * as Font from 'expo-font'
loadFonts=async()=> {
await Font.loadAsync({
// Load a font `Montserrat` from a static resource
popinsmed: require('../../assets/fonts/DMSans-Regular.ttf'),
// Any string can be used as the fontFamily name. Here we use an object to provide more control
Montserrat-SemiBold': {
uri: require('../../assets/fonts/Poppins-Medium.ttf'),
display: Font.FontDisplay.FALLBACK,
},
});
this.setState({ fontsLoaded: true });
}
componentDidMount(){
this.loadFonts();
}
render(){
return(
<View><Text style={{fontFamily:"popinsmed"}}>This is a custom font</Text></View>
)
}
For reference, click here.
I have a nuxt app with a few third party plugins, gsap, splitting.js, etc.. All of the plugins work fine as they should.
I have a simple-keyboard plugin loading in the same way as the others, it loads fine locally but after I run nuxt generate and upload my dist folder to the s3 bucket, the keyboard/plugin does not show up. There are also no errors in console. I'm not sure what is removing it?
I have created a file in the plugins directory like so:
plugins/simple-keyboard.js
In my nuxt.config.js file I have placed:
plugins: [
{ src: '~plugins/fastclick.js', ssr: false },
{ src: '~plugins/splitting.js', ssr: false },
{ src: '~plugins/simple-keyboard.js', ssr: false },
{ src: '~plugins/maskedinput.js', ssr: false }
],
Here is the contents of my plugins/simple-keyboard.js file:
import Keyboard from 'simple-keyboard';
import inputMask from "simple-keyboard-input-mask";
import 'simple-keyboard/build/css/index.css';
if(window.location.pathname == '/welcome') {
let keyboard = new Keyboard({
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button),
layout: {
default: ["1 2 3", "4 5 6", "7 8 9", "{C} 0 "],
shift: [" ABC DEF", "GHI JKL MNO", "PQRS TUV WXYZ"]
},
theme: "keyboard hg-theme-default hg-layout-numeric numeric-theme",
disableCaretPositioning: true,
inputMask: "(888) 888-8888",
modules: [inputMask],
syncInstanceInputs: true
})
let backspace = new Keyboard(".backspace", {
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button),
layout: {
default: ["{bksp}"]
},
mergeDisplay: true,
display: {
'{bksp}': ' '
},
theme: "hg-theme-default hg-layout-numeric numeric-theme",
syncInstanceInputs: true
})
function onChange(input) {
document.querySelector(".input").value = input;
}
function clearKeyboard() {
keyboard.clearInput();
document.querySelector(".input").value = '';
}
function onKeyPress(button) {
if (button === "{C}") clearKeyboard();
}
}
Locally everything works perfectly fine.
Even when I host it on a local PHP server and point to the dist file. everything runs fine.
When I run my build command and deploy the contents to my S3 bucket, everything works aside from the keyboard. It simply doesn't render.
I cannot figure out how to get the simple-keyboard plugin to properly render when deployed to S3.
I'm the creator of simple-keyboard, and just wanted to update this entry as it was resolved on a Discord chat.
The issue was in this line of code:
if(window.location.pathname == '/welcome') { ...
In the local environment, the pathname was indeed /welcome. However, once pushed to the server, the pathname became /welcome/ so the code never got to the part where the keyboard is instantiated.
Hope that helps anyone who encounters a similar issue.
Unable to make scrolling to work properly on 64bit IE10 Win7.
Main.js
Ext.define('ScrollLab.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
],
config: {
layout: 'vbox',
itemId: 'mainPanel',
scrollable: true,
items: [
{
xtype: 'container',
html: 'Sencha Touch 2.3 is the latest version of our industry-leading mobile app framework. In Sencha Touch 2.3 we updated the device APIs to make Apache Cordova a fully supported component in the library, including support (using the latest version of Sencha Command) for the Adobe PhoneGap Build. Touch 2.3 also includes two brand new themes: Cupertino and Mountain View, in addition to several enhancement to existing themes, especially the Blackberry 10 theme. Other enhancements in Touch 2.3 include full support for XMLHTTPRequest Level 2 (XHR2) on devices that support it, and a new ProgressIndicator Component to give users a true indication when uploading. Read more about all the new features of Touch 2.3.',
width: '100px'
}
]
}
});
MainController.js
Ext.define('ScrollLab.controller.MainController', {
extend : 'Ext.app.Controller',
requires : [
],
config:{
refs:{
mainView: 'main'
},
control:{
mainView: {
activate: 'onMainViewActivate'
}
}
},
onMainViewActivate: function(view) {
"use strict";
var me=this;
var container = view;
if(container.isXType('selectfield')) {
container = container.down('list');
}// Add support for selectbuttons
// Disable default scroll for mobile.
container.getScrollable().getScroller().setDisabled(true);
console.log(me.getMainView().element.dom);
var scrollContainers = Ext.DomQuery.select('.x-scroll-view', me.getMainView().element.dom);
var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', me.getMainView().element.dom);
for(var i=0;i<scrollContainers.length;i++){
scrollContainers[i].style.overflowY = "scroll";
}
for(i=0;i<scrollBars.length;i++) {
scrollBars[i].style.zIndex = "-1";
}
console.log(scrollContainers);
console.log('Length - ' + scrollContainers.length);
}
});
This code enables the scroll but it freeze me on the current view and doesn't let me scroll up/down when content overgrows the screen.
This piece of code works great for Webkit browsers(Chrome, Safari) but doesn't work well on IE10.
I figured it out. Not a single solution. For different components I had to enable Scroll bars differently. But key thing is using overflow: scroll and height 100% CSS property at the right place in DOM.
Feel free to reach me if you need suggestions.