Salient Soft

The title says it all. This really shouldn’t be hard, but I searched a number of forums full of gripes from people with no answers, and even on a microsoft forum, a microsoft reply said basically “sorry you can’t do that”. I felt this was particularly poor misinformation given that as below, I persevered with looking further and found a perfectly good solution that does it easily.

This post here was a start – you can do a “file/save as” of a a presentation, and select “powerpoint show” i.e. PPSX file (there is also a macro-enabled show file but did not need to try that). This looked promising as it did start the show when clicked on as a local file, but still did not actually start the show when shared via a hyperlink.

Later I found this post here which gave a clue to the issue and tried just adding a query string parameter “action=embedview” to the link URL. This worked perfectly in exactly the way I wanted – the show started automatically via the embedded viewer but still showed in a browser tab. If you want full screen you can use f11 as normal to toggle it in the browser. I didn’t care for having a link which directly took you into full screen powerpoint showing, as this takes control away from those who might be unaware of what is going on. There is an ‘open in new window’ icon at the bottom right, and this does open the presentation in a new tab without showing it, but this is fine, if someone wants to play with it they can. It also means they can save a copy themselves, but I was happy with this as they are viewing it all anyway, and if it was a web page they could export to PDF so not much different.

One key point on this is that it only worked when the file was hosted on my company MS onedrive share which actually had the office licence. It did not work on a Zen hosted file (it just downloaded it), and when I tried on a free MS onedrive share, it opened the presentation without running it directly, even when the above query string parameter was added. I am not sure of the reason for this, and may look into this further at some point, but it was not an issue anyway – I just needed to host the file on the correct share, and create a read only onedrive hyperlink with onedrive, and then add the query string parameter to the url, and it all worked fine.

This meant I could easily prepare simple powerpoint presentations to share for viewing, more easily than trying to put web pages together to do a similar thing – after all, the kind of presentation I wanted is exactly what powerpoint is for, and it does it easily. It was just a shame that the solution does not appear to be documented well online, but I was thankful for a good solution in the end.

Comments Off on Creating a hyperlink to a powerpoint presentation that opens and shows automatically

Firstly I installed the latest current release of node under NVM. This was 18.2.0, so this was installed simply using “nvm install 18.2.0”. This is only needed once as it is global for any project/folder running under NVM.

I then followed the upgrade procedure for angular here. Upgrading is well documented and supported – you can pick any pair of versions along with some details of your app complexity/what you use, and get specific update help here.

I then updated the various dependent components. I needed to add the switches “–force –allow-dirty”. “–force” was to force the updates through even when there were dependency version issues – this would all come out in the wash when finished, it was just a question of the dependency update order which triggered this. “–allow-dirty” allowed the update to proceed even when there were pending git commits present. I am unsure why the process is so picky about this – I did not intend to commit after every individual update command, and did not see why there should be a warning about it. The following updates were done:

npm install primeng@13.4.1 –force –allow-dirty
npm install primeicons@5.0.0 –force –allow-dirty
npm install primeng@13.4.1 –force –allow-dirty
npm install primeflex@3.2.0 –force –allow-dirty
npm install jasmine-core@4.1.1 –force –allow-dirty
npm install @angular/cdk@13.3.7 –force –allow-dirty

for my chart microapp which uses the PrimeNG chart component and therefore chart.js, I had to upgrade chart.js to the latest 3.8.0 or builds won’t work:

npm install chart.js@3.8.0 –force –allow-dirty

I also with noted with charts that the styling changed – charts were too big for browser window and needed unwanted scrolling, so would need to look into styling issues on this. Also the growl when you click on chart points etc. has gone.
This is replaced with a hover “growl” next to where you hover over a point. I confirmed the behaviour change with the primeng showcase.

I also noted that @angular/cdk  slipped the net orignally and needed doing (even adding again) manually as listed above.

After all the updates as above I was able to build and run in the usual way.

Comments Off on Upgrading Angular & PrimeNG Microapps from V11 to V13

This is fairly straightforward, but appears to be subject to the fundamental limitation that the Fritz Box cannot make use of multiple external IP addresses for the port forwarding, even if you are on an 8 port subnet like I am. I made absolutely sure that the Fritz Box was aware of the subnet by accessing its menus, then navigating to Home Network/Network on the left menus, and then clicking on the Network Settings tab. You then click on Additional settings to reveal some extra settings, and then scroll down and then click on IPv4 settings. Finally, if you scroll down and look under Public IPv4 Subnet you will see the public subnet visible/allocated to the Fritz Box, as a prefix and network mask.

In my case this was clearly an 8 port subnet, but unfortunately the fritz box only allowed port forwarding using the primary router public IP address.

I managed to work within this limitation however, as you can still forward multiple different ports to multiple different local devices. For example, to enable inbound RDP access to a PC as I did, do the following:-

1/ Visit Internet/Permit Access on the menus, and then click the Add device for sharing button.

2/ Select the target PC/device at the top, then at the bottom click New Sharing, which configures the desired sharing for the device.

3/ Then Click the Port Sharing radio button (as opposed to the default My FRITZ! sharing). Under application, I selected MS remote Desktop as the Fritz box was aware of RDP. You can select Other Application and enter the ports manually if you are working with an application that the Fritz box is unaware of.

4/ You then have 3 ports to configure, which is slightly confusing – I was not clear on all of this and the online help was blank on some of this detail. When I selected MS Remote Desktop, Port to Device and through… were both set to 3389, which was the correct internal port to use for RDP. Below this was Port requested externally, which is the actual external port you want to use. In one case therefore I left the defaults, but for a second PC, I set the external port to 3390, which allowed me to use the same external IP address for 2 different RDP configuration to access 2 different internal PCs successfully. I was not clear however what the distinction between Port to Device and through… was all about, but did not need to touch it.

5/ When accessing via the MS android RDP app, I was able to configure multiple PCs as required, and could also configure both Lan and internet configurations of the same PC so that I could access it both ways from my phone. A key trick here is that this app does allow a different RDP port to be used. Under PC name for the internet, I set the target IP address (the public IP address of the router), and appended a different port using e.g. :3390 notation to use port 3390 instead of 3389. You are able to give an additional friendly name for the PC when doing this, which is useful when configuring external IP access. Internally on the lan you can just use the standard windows network names. This then all worked fine and I was able to use my phone both to remotely access the fritz box to wake the PC, and then remote login using the MS RDP app to access it.

Comments Off on Enabling External access/port forwarding with the Fritzbox 7530, and using the MS RDP Android App.

As I found previously, there were a number of things to get right to make this work, as follows:-

1/ The bios settings for the motherboard need to be set correctly to enable it, and whether/how to do this varies depending on the motherboard. My older Gigabyte Z77-D3H at version F18 did not have a setting to enable this, but it turned out that it worked anyway once all the other issues were correctly address as below. My newer Asus Prime Z690M-Plus D4 did need a setting changed, and this was somewhat subtle. For this motherboard, from the home page you need to visit Advanced Mode/Advanced/APM Configuration/Power on by PCI-E, and enable this option. Note that you only find out from the prompt when you actually visit this option, which is labelled as PCI-E, that it also affects the onboard LAN as well as any PCI-E adapter. This was not clear.

2/ In Windows 10 and 11, open the control panel and visit Hardware and Sound/Power Options, and then select “Choose what power buttons do” on the left menu. Then click “Change settings that are currently unavailable” at the top, and this enables the “Turn on fast startup” option, which should be disabled. Whilst I am not certain that this is required, it was cited in this post re wake on lan, and turning it off did not slow boot time noticeably on my PCs, so I left it on.

3/ You then need to change the network adapter settings. Open the device manager and located your network adapter. Check the advanced settings and ensure that Wake on magic packet is enabled. Then, under the power management tab, allow this device to wake the computer, ensure that Only allow a magic packet to wake the computer is enabled. Again, I am not certain that the latter is absolutely required and I did get some intermittent behaviour when testing wake on lan, but in the end I have left this enabled, as I have no current requirement for any other way to wake the computer.

4/ On the Fritz Box 7530, wake on lan is built in. Navigate to Home Network/Network using the menus on the left, and then select the device that you want to wake. Note that it may be under active connections or idle connections in the list, and it is not clear what an idle connection means – a pc that is on/booted can appear in the idle connections list. Either way, this does not matter. You just click on the pencil icon as if to edit the settings for that device (even though you are not changing anything, this is where you will find wake on lan). Scroll to the bottom and you will see a button labelled Start Computer, which will successfully perform a wake on lan if all is in order. Note that to the left of this button is a check box labelled Start this computer automatically as soon as it is accessed from the internet. Whilst it might be convenient to enable this to save a manual wake on lan via the fritz box when accessing from the internet, I have elected not to do so at present as my needs for this are infrequent and it gives additional protection for the lan, as a remote fritz box access is needed to trigger this, which is of course password protected. However, doing it automatically would be a lot more convenient as accessing the fritz box remotely to do the wake on lan is perfectly possible and relatively straightforward, it does require several steps.

Once all this was done, I achieved consistent wake-on-lan behaviour using my Fritz Box 7530 to perform the wake on lan, as per this post here.

Comments Off on Configuring Wake On Lan with Windows 10/11 and Fritzbox 7530

I experimented with mounting a backup image from a particular backup point on a job, using the Backup software.
This worked fine, and a new drive letter was created which could be browsed directly via windows explorer.
I was not clear how to dismount the image, and the documentation said that it would only remain mounted until a reboot anyway.

In fact, after rebooting, the image remained mounted in error even if the backup disk was not available (obviously it could not be fully browsed). I managed to remove it consistently by de-assigning its drive letter in disk management, then rendering it offline in disk management, and then using device manager to delete the UIM device for the mounted image, which appeared under disk devices. This worked ok providing all the steps were done in the right order, otherwise it appeared to remain around after a reboot.

After trying again in the backup software, I found it was a simple user error – the mount screen allows selection of a drive letter, and if one is already selected you can select “None” again to remove it and dismount the image. This was not immediately obvious the first time around – I failed to notice that “None” was available in the list as it was hidden and you need to explicitly scroll to the very top of the list to see it.

Once I dismounted the image this way, it worked immediately and completely removed the image and the device even without a reboot.

Comments Off on Dismounting a Paragon Backup Image

My initial attempt on this was to use static positioning when the title bar was unpinned (e.g. scrollable), and fixed positioning when the bar was pinned.

When using fixed positioning as above, the title bar is no longer in the normal flow so the rest of the content (in my case, encapsulated in a main container div) will sit underneath the title bar. I therefore used a top margin when pinned to prevent the top of the content being hidden. Some issues arose with this as follows:

1/ It was necessary therefore to add an additional margin to the main container to avoid occluding the content under the title bar, which meant exactly knowing its height. In addition, to allow a gap between the title bar and the content when pinned, I added a border to the title bar of the same colour as the page background, in effect to act as a kind of margin. This worked fine.

1/ My title bar was floated, so it automatically resized to fit its content. this meant that the margin allowance on the main content div would have to vary dynamically on resize.

2/ One way around this was to set media query breakpoints to trigger on the resize, and to set a fixed height for the title bar rather than floating it, and setting the margin on the content to match in each media query. In addition to this, I implemented a flexbox solution where the container was sized and the content centered within it. I was not so keen on this as it lost the ability to dynamically resize the title bar container as needed by the content resizing, and might cause problems if the layout/text changed in the title bar for example.

3/ Another way was to use a resize event and change the size of the margin on the content programmatically, using an rxjs debounced resize event. This worked pretty well, but I needed to switch the content margin on and off when the title bar was pinned/unpinned. This should have worked ok, but I noticed some slight visual movements in some page elements on pinning change, even though I could not see any style or layout changes in the browser inspector. This was annoying.

4/ I then tried using absolute positioning of the title bar when unpinned, and fixed positioning when pinned. This relied on using the same programmatic margin on the content for both, and in fact simplified the code, as I did not have to switch off the programmatic margin change when unpinning the title bar – it was used all the time, as absolute positioning was also outside the normal flow. Also, the slight glitches I saw on the page were completely eliminated.

I therefore stuck with method 4/ as the final solution. Some sample code showing the programmatic resize is as follows:-

private readonly resizeDebounceTime = 100;
private resizeObservable!: Observable<Event>;
private resizeSubscription!: Subscription;
private readonly formatPixelSize = (pixels: number) => `${pixels}px`;

…

ngAfterViewInit(): void {
   this.initBannerSpacingAdjustment();
}

ngOnDestroy(): void {
   this.destroyBannerSpacingAdjustment();
}

private initBannerSpacingAdjustment(): void {
   this.adjustBannerSpacing();
   this.resizeObservable = fromEvent(window, 
      ‘resize’).pipe(debounceTime(this.resizeDebounceTime));
   this.resizeSubscription = this.resizeObservable.subscribe(event => 
      this.adjustBannerSpacing());
}

private destroyBannerSpacingAdjustment(): void {
   if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
}
}

private adjustBannerSpacing(): void {
   /* note that the offsetHeight is the total height of the banner,
    * including padding and border */
   this.mainContainer.nativeElement.style.marginTop =
      this.formatPixelSize(this.banner.nativeElement.offsetHeight);
}

 

Comments Off on Pinning a title bar on a page with Angular 11/PrimeNG 11

Update 4/3/21

I had problems again when trying to display font-awesome icons in a microapp/web component. In this case, my parent fabric application which loaded the web component had font awesome loaded in package.json but not in angular.json. I removed font-awesome from the web component application in both package.json and angular.json as the parent had loaded it in both places. This then worked correctly. There may be a similar issue with e.g. the prime icons etc. but have not researched this. Clearly PrimeNG itself is needed in both applications as the child web component has development dependencies on it. My theme styling however is only loaded in the parent fabric, and it makes sense that font-awesome behaves the same way.

Original Post

My previous post about using font awesome with Angular  up to v6 and PrimeNG up to v6 is here

With PrimeNG 11, Prime have introduced their own icon set, PrimeIcons.

I wanted to use some font awesome icons as well as they have a larger set, but initially they would not display. When trying again later it all worked fine, and am unsure what I got wrong the first time around. To be clear, the following steps were needed:

1/ Install font awesome and add to package.json (–save adds to package.json)

npm install font-awesome –save

2/ Add a style reference to angular.json

“styles”: [
“node_modules/primeng/resources/primeng.min.css”,
“node_modules/font-awesome/css/font-awesome.min.css”,
“node_modules/primeicons/primeicons.css”,
“src/messages.scss”,
“src/styles.scss”
],

Double check that the referenced css file actually exists under node-modules for the version in use. in my case, this was 4.7.0.

I was looking for pin/unpin icons for a banner bar, and could only find a vertical pin, fa-thumb-tack – I also wanted a horizontal pin to designate the unpinned state. Fortunately, font awesome has the ability to transform icons e.g. to rotate them. This is more limited in v4, but rotation is allowed, so my reference was as follows:

<p-toggleButton [(ngModel)]="bannerPinned" onIcon="fa fa-thumb-tack" offIcon="fa fa-thumb-tack fa-rotate-90"
                class="ss-pin-banner"></p-toggleButton>

This worked perfectly. v5, which was not available directly to install via npm at the time, allows more transformations. The transforms are detailed in this stack overflow post and this font awesome page.

Comments Off on Using Font Awesome with Angular 11/PrimeNG 11

This follows on from this earlier post for Angular 6.

PrimeNG has for some time removed support for legacy themeroller themes and added their own architecture and theme editor. However, for the first time, the theme editor and the SCSS theming interface/standard SCSS files are no longer open source, but are a paid for option. The rest of the component set, including the delivered compiled css for all the standard themes, is available as open source as before.

Therefore, having considered the options, I elected to take a standard theme that was close to what I needed and edit its css directly. This is suggested as an option by Prime for small changes, but it is possible that later changes to the theme architecture could require theme changes as we are editing the compiled css. I decided that the risk and rework that might be needed was small, so have taken this route.

My policy on this is to copy the theme files to a new theme folder under assets/resources/themes/, and then to rename the theme.css file to theme.scss, as the compiled css is also valid scss. This then allows me to add my own variables as required for theme colours etc. to avoid duplication. The intention is to minimise alterations to the original theme, so I would only add variables where I had made changes, to minimise any rework if I had to take a new version of the standard theme and add my changes again.

Whilst doing this, I noted a warning that node-sass, as used previously, is now deprecated. I therefore switched to sass, as per this stackoverflow post, using npm uninstall -g node-sass followed by npm install -g sass. This worked fine, and my changes to the existing compilation script in package.json (also allowing multiple themes to be compiled) were as follows:-

 “scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“scss”: “npm run scss1 && npm run scss2”,
“scss1”: “cd src/assets/resources/themes/salient-new && sass theme.scss:theme.css –source-map .”
“scss2”: “cd src/assets/resources/themes/salient-new2 && sass theme.scss:theme.css –source-map .”
},

Comments Off on Creating and compiling a Custom PrimeNG 11 theme deployed as a static asset

I am  using multiple themes and theme selection, using custom themes

For interest I am loading the theme css as a static asset, in index.html:-

<head>
<meta charset=”utf-8″>
<title>Microapp Fabric Prototype</title>
<base href=”/”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link id=”theme-css” rel=”stylesheet” type=”text/css” href=”assets/resources/themes/salient/theme.css”>
</head>

Then I am dynamically changing the href to switch themes:-

export class ThemeSwitcher {
/*
* Select the target theme
* this may be an external theme or an internal packaged one
* If the path contains a ‘/’ the theme is assumed to be an external theme source
*/
changeTheme(theme: string) {
const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById(‘theme-css’);
themeLink.href = theme.indexOf(‘/’) >= 0 ? theme : ‘assets/resources/themes/’ + theme + ‘/theme.css’;
}
}

A theme SCSS under the assets folder will be automatically compiled and included inline in the package only when a specific theme is referred to in the “style” section of angular.json. When dynamically switching multiple themes as above, the themes are kept as static assets and are not inlined in the package and so are removed from the “style” section. When this is done, the theme scss files for all the themes are not compiled to css automatically when an ng build or ng serve is done. This post here details how to manually install and build the scss using node-sass. It goes into other details which I haven’t needed as I am using static assets, so only node-sass is needed. If in the actual theme directory, the following commands will install  node-sass and compile the scss for the theme and also create the source map:-

npm install node-sass

node-sass theme.scss theme.css ––source-map .

This can also be added to the scripts section of package.json to make an npm command:

“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“scss”: “cd src/assets/resources/themes/legacy-blue && node-sass theme.scss theme.css ––source-map .”
},

This can be run by simply using npm run scss

Note as above that npm supports the cd command in the scripts section, both for linux and windows (as detailed here). The default directory is the root of the project, and this is consistent even if you run the npm command e.g. from a subdirectory. I did not manage to find a way to automate this via an ng build or ng serve command, so these would have to be run in conjunction with npm run scss (with the latter running first).

No Comments »

Update 23/5/2018

I retried this using Angular 6 and the latest primeng.

Step 2/ below was not needed, and I did not install/reinstall gulp per step 3/ (not used this time – need to check/confirm re this)

The wiki steps referred to below, here, referred to using sass to build the css, but this command did not work for me even when I installed the node.js sass per here -  the –update command came back with an error.

I then gave up using sass to compile the sass files.

Because of this issue I still had to fix the theming, so tried to copy the css files as below rather than compile the sass. This time the themes folder was under src\assets\components.

I therefore created another skeleton app, installed primeng using “npm install primeng”, and then copied the themes folder from under node_modules\primeng\resources  to src\assets\components, overwriting the themes already there.

This added the css files that were missing.

I could then run the showcase with theming fully working, either using “npm start” or “ng serve” – either worked.

I did notice that the theming borders on the treetable component did not appear to work, but apart from that all the theming including theme switching worked fine.

Original Post

It is useful to have this running locally in order to can try out occasional code hacks on the example code to try out ideas or check how things work if the docs are not clear on a point, knowing that you have started from a working example.

The steps for this basically follow the wiki steps here. Note the following additions/amendments to the steps:-

1/ I cloned the repository from here. Having cloned I then listed and disconnected from the remote repositories, as the clones were just for local use:-

git remote –v

git remote rm origin

git remote –v

2/ Dependencies as follows were added to package.json as per instructions:-

  "dependencies": {
      "@angular/common": "4.0.0",
      "@angular/compiler": "4.0.0",
      "@angular/core": "4.0.0",
      "@angular/forms": "4.0.0",
      "@angular/http": "4.0.0",
      "@angular/platform-browser": "4.0.0",
      "@angular/platform-browser-dynamic": "4.0.0",
      "@angular/router": "4.0.0",
      "@angular/animations": "4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.2.0",
      "zone.js": "^0.8.4"
  },

Following this npm install was run to download all the dependencies

3/ In order to build using gulp as instructed (gulp build), I installed gulp first as per the instructions here:-

npm install --global gulp-cli

npm install --save-dev gulp

4/ I then ran npm start to run the showcase, which defaults to http://localhost:8080/

The showcase ran ok locally but there were some issues with the theming – the theme had a transluscent background on the menus and dropdowns for example which did not correctly occlude the text underneath. The live showcase on the PrimeNG site did not have this problem.

On investigation it appears that the theme files are under the main resources/themes directory, but are not being sass compiled from scss during the build so there are no .css files there. The gulp file for the project, gulpfile.js, does not have any entries that do sass compilation so this may be an omission/bug in the version I had downloaded.

The showcase does not use the primeng under node_modules – it defines its own primeng package such that if you try to enter npm install primeng to install the themes in the normal way as part of the npm installed package, you get an error from npm about the duplicate primeng.

My workaround was straightforward – I just copied the theme folder and all subfolders from under the node_modules\primeng\resources directory in another application folder to the projects top level resources directory (in fact I used the primeng-quickstart-webpack which I had already set up) – any other project where you have installed primeng will do. This solved the problem by providing all the css files for the themes, and the themes and theme switching then worked.

As I have no requirement to do a full working build for the showcase this is no problem.

I checked for other posts about theming issues and found a couple of StackOverflow posts about theme issues with Webpack here and here. These may prove relevant for future development.

No Comments »