I'm doing a report using Qliksense but when using a proyector you can barely see the numbers on the graphs.
Any ideas on how to modify the code of the program to increase number/text size overall?
A possible way to do that would be to use the themes in QlikSense. Yet they have limited functionality, but they may be able to help in your case.
You will have to go into your QlikSense themes directory, mine is under C:\Users\user\AppData\Local\Programs\Qlik\Sense\Client\themes. Here you will find the default themes (you can also create your own ones).
Create a copy of the folder sense which is the default theme (let's name this new folder senseModif from now on). Open the file theme.json from the new directory and play around with the values. For example if you want to set text sizes in a pie chart you can modify this segment:
"pieChart": {
...
"item": {
"name": {
"fontSize": {
"default": "50px",
"large": "50px",
"medium": "50px",
"small": "50px",
"tiny": "50px"
},
...
I already changed the fontSize values here for 50px. To see the result of this just go to the QS web interface, open your app, and open a sheet in it. You will have a similar url for the app: http://localhost:4848/sense/app/filenameofapp.qvf/sheet/GPUNXF/state/analysis/. Now just put theme/senseModif at the end of the url and it will now display the objects with your new styles.
As I said, at least for me, it's not working for every object type right now, but at least it's a start.
Much more on the themes and on their usage can be found here.
Related
I just jump to laravel 9 recently (from few months ago), kinda wondering about,
Is it possible to generate all css classes (including custom classes), BUT, only when APP_ENV on .env is not production?
I tried to overcome No.1 (see below explanation), by using const APP_ENV = import.meta.env.VITE_APP_ENV; on tailwind.config.js - so I can do if - else thing, to load things, but it produce an error - offset is longer than source length! offset 81 > length 59. Is it possible to get .env variables on tailwind.config.js?
As I tried to find another way for No.2. I'm narrowing my objective on No.1 and No.2, so, I tried to load all possibilities of my "custom classes" only on dev. By using safelist - to generate all my-own custom class, but it seems not working well, since, the custom class that I want to add doesn't added. I'm using this - pattern: /./ - since I saw this article says so (please, correct me if I'm wrong), but, it's indeed "hitting" all other classes, not just my custom classes. I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *? (I already check around on tailwind docs, but couldn't found something like that)
I tried a proper way, to just load all my custom classes like pattern: /ctm/, but as stated on tailwind documentation
Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.
How can I do so, without me typing & guessing all of the possibility of variants?
Explanation how I try to overcome For question No.1 -
I tried using these code on app.js
const APP_ENV = import.meta.env.VITE_APP_ENV;
if (APP_ENV == 'production') {
//need to use ()
import ('../css/app.css');
}
and with below code on app.blade.php
#if (config('app.env') != 'production')
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
#endif
But, when it comes to a custom classes on tailwind.config.js - for example
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'ctm-dark-purple': '#2a234f', //<--- custom class here
'ctm-light-dark-purple': '#2a234f', //<--- custom class here
},
},
},
It doesn't generate that custom classes, since I "block" the generated class and swap it into cdn mode on dev.
So, in-summary, how can I "generate all css classes" only on "development" mode? Along with my "custom css class"? If that's not possible, then, is it possible to overcome No.3? I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *?
My main reason is simply, I want to apply classes directly on web-browser console and see the changes more faster, rather than back-and-forth modifying-then-save the code on text-editor.
Thanks a lot!
Log -
Updating Problem No.3 - since forgot to mention precisely what I want
I don't know why, the example in the document can display the icon, but the one I wrote does not display
enter image description here
this.SpecChart.addOnScreenMenu(
[
[
// Default buttons
OnScreenMenuButtonType.ZoomInX,
OnScreenMenuButtonType.ZoomOutX,
OnScreenMenuButtonType.ZoomInY,
OnScreenMenuButtonType.ZoomOutY,
OnScreenMenuButtonType.ZoomToFit,
OnScreenMenuButtonType.ToggleAnimations,
// cusrom button
{
dimensions: { rows: 1, columns: 1 },
label: "Show Heatmap",
opacity: "1",
color: "blue",
shape: OnScreenMenuButtonShape.RoundedRectangle,
action: this.show,
},
],
],
OnScreenMenuButtonShape.RoundedRectangle
);
Probably this is caused by LightningChart not having access to its resources folder. The OnScreenMenu pictures are distributed in a resources folder along with the library, but the library itself doesn't know where it is located.
Here's a link to the related item in API documentation to learn more: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/interfaces/lightningchartoptions.html#resourcesbaseurl
A quick and dirty fix you can try is the following code snippet which tells LightningChart to look for the resources folder from a CDN service - this is super slow and I would not advise to do this in any long term solution.
const chart = lightningChart({
resourcesBaseUrl: "https://cdn.jsdelivr.net/npm/#arction/lcjs#3.4.0/dist/resources",
}).ChartXY();
// ... add OnScreenMenu inside the chart ...
For a long term solution, you'll have to download the resources folder to your project, setup a file server and supply the URL to the file server with resourcesBaseUrl option.
You have set: this.show. Is it not just show. And by the way. Where is your icon property by custom button?
The last one is a custom button. My question is that the first few yellow buttons do not display icons.I know custom button can set icon url
as you can see in the image
My question is similar to this one but the answer given there is for Vim and I need one for VS Code. I'm a real newbie, and I tried to solve this myself, but these attempts failed me:
Markdown Preview GitHub Styling - Says it allows user-defined custom css, but it styles html preview, not the text in the editor
Markdown Theme Kit - Points to custom .css files, but the included ones don't tell me how to do it differently for different heading levels
Markdown Header Coloring - Claims to do exactly this, but when I try to put in user-defined css to give each heading level a different color, I still get color changes between headings of the same level, even after closing/restarting VS Code.
Help is very appreciated.
There is a built-in way to style text, including Markdown headings, in the editor without an extension, using VSCode's Colour Theme settings:
Open your settings.json (~/.config/Code/User/settings.json) or Ctrl+p "settings", and between the top-level {} insert for example:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#9cecfb",
"fontStyle": "bold",
}
},
{
"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#83a4d4",
}
}
]
}
I faced the same issue and find a way with the VSCode extension "Markdown header coloring"
Basically you have to
install the extension
set some custom settings in settings.json. You can find examples of custom settings in the section "User defined header coloring"
do not forget to reload the window after each modification: open Command Palette → type Reload window
Cheers
I'm writing an extension for Chrome (currently testing in Chrome 51). I need the content script to run in dynamically created iframes.
For example, if I understand correctly, this site creates a new iframe each time the user clicks "Run".
This is my manifest (well, parts of it, which I thought were relevant):
"content_scripts": [
{
"matches": [ "<all_urls>", "http://*/*", "https://*/*"],
"match_about_blank": true,
"all_frames": true,
"run_at": "document_start",
...
}],
"permissions": [
"<all_urls>",
"http://*/",
"https://*/",
...
]
But the newly created frame still doesn't get my content script. I put a breakpoint in my content script's entry point and it isn't hit (it only hits for the main frame of the page, but not the frame which was dynamically created).
I know there are other similar questions but the Internet seems to be in agreement that match_about_blank is the way to go, but it doesn't work in my case.
UPDATE: So it turns out this wasn't the problem at all. I would have deleted the question (cause truly it's kind of embarrassing), but still there's a lesson to be learned here, since I spend A LOT of time investigating why my script isn't loaded.
In fact it WAS loaded. The breakpoint didn't hit probably because of some glitch in the map and/or source files (when I recompiled my TypeScript project and copied the files again, the breakpoint started hitting). I should have trusted the debugger window to see that my content script was loaded, instead of insisting on hitting the breakpoint...
Diagnose
I recently came across : PageSpeed Insights, it basically test your page speed, spit out a score, and display what cause your page to slow-down.
I enter my url and here is my : result.
Issues
I clearly don't have a lot score, but I'm working on improving them.
I got a lot of image optimization problems. I've tried 2 things.
__
1.Use ImageOptim Software
I've tried using ImageOptim Mac Software to optimize all my images in my img/ folder.
2.Use grunt imagemin plug-in
On top of that I , I use a build tool to re-compress all my images
in my img/ folder, and store the compress one in dist/img/folder.
imagemin: {
dynamic: {
options: {
optimizationLevel: 3,
svgoPlugins: [{ removeViewBox: false }],
use: [mozjpeg()]
},
files: [{
expand: true, // Enable dynamic expansion
cwd: 'img', // Src matches are relative to this path
src: ['**/**/**/*.{png,jpg,gif,ico}'], // Actual patterns to match
dest: 'dist/img' // Destination path prefix
}]
}
Imagemin Result
Luckily, I got all my 104 images reduce down 4.11MB.
Re-Test Result
But sadly, after re-linking my entire page to new images directory dist/img/. I test my site again with PageSpeed Insights, I still got the same warning image optimization.
How can I can fix/improve this problem ?
Is it because I set the optimizationLevel: 3 too low ?
Any approach / idea / strategy / better solution / suggestion ?
Thanks a lot !
I would recommend optimizing your images beforehand using one of these tools:
Windows
FileOptimizer It uses multiple tools to make your images as small as possible.
JPEG (All Platforms)
MozJPEG (by Mozilla)
PNG (All Platforms)
PNGQuant, especially the web fronted for it: TinyPNG (careful lossy!)
You could consider using a PageSpeed server module.
Those are able to automatically apply image optimization and thereby satisfy PageSpeed Insights recommendations.
See https://developers.google.com/speed/pagespeed/module and https://developers.google.com/speed/pagespeed/module/faq#other-servers for availability.
There is nothing wrong in using imagemin.
The problem is about css based resizing. If the natual img size is 150px and the css is squeezing it inside a 100px box, google wants you to resize the img to 100px.