Getting images byte[] from MS SQLServer through WCF to Ionic3 Angular4

Image

So , that was quite a challenge.

After saving the images as byte[] pretty neat through the MVC client into the MS SqlServer , I wanted to get them into the app of Ionic3 with Angular4 ..

 

The problem was –

Well there were several problems –

1. How to return the data through the http without loosing data in “translation” on the way ?

Solution is in C# WCF before returning it convert to base64 – it will send the data intact through the www traffic.

dto.Logo = Convert.ToBase64String(dal.Logo);

       2.   When we get the data – we need to translate it into the image again :

this post helped me –  Search for the comment with 400 upvotes!

So, in my ts client side – my Ionic3 Angular4 baby ,  I added a function translating the byte[] into a Blob.

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.

b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || ”;
sliceSize = sliceSize || 512;

let byteCharacters = atob(b64Data);
let byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);

let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

let byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);
}

let blob = new Blob(byteArrays, {type: contentType});
return blob;
}

3. Now I started getting those messages from Chrome 

unsafe:blob:http://localhost:8100/55df97ad-0b55-4724-8a4f-83861b87e60a:1 GET unsafe:blob:http://localhost:8100/55df97ad-0b55-4724-8a4f-83861b87e60a net::ERR_UNKNOWN_URL_SCHEME

 

So I’ve built a pipe as suggested here  in compbination with the DomSanitation suggested here :

So at last I have taken this solution :

import { Pipe } from ‘@angular/core’;

import { Pipe } from ‘@angular/core’;

import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from ‘@angular/platform-browser’;
@Pipe({ name: ‘safe’})

export class SafePipe {
constructor(protected _sanitizer: DomSanitizer) {
}
public transform(value: string, type: string = ‘html’): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {

switch (type) {

case ‘html’: return this._sanitizer.bypassSecurityTrustHtml(value);

case ‘style’: return this._sanitizer.bypassSecurityTrustStyle(value);

case ‘script’: return this._sanitizer.bypassSecurityTrustScript(value);

case ‘url’: return this._sanitizer.bypassSecurityTrustUrl(value);

case ‘resourceUrl’:

return this._sanitizer.bypassSecurityTrustResourceUrl(value);

default: throw new Error(`Invalid safe type specified: ${type}`);

}

}
}

 

Added it to declarations in your app.module.ts with class name SafePipe .

And added the pipe on the html template

<img [src]=”company.LogoImage | safe: ‘resourceUrl'”>

And here I am – after two days without sleep I have images from the server side in my app..

   

Now it’s just about vise-versa – trying to upload those slippery brothers  🙂

Advertisements

Minify JS on rebuilding the web

 

Download JSMIN from http://www.crockford.com/javascript/jsmin.html

Instead of opening the WebSite  project , open a WebApp .

(you can see diff here and here – actually it’s an issue by itself )

So , on the Property Pages of your WebApp –> goto  build events –>

build one time script for rebuilding the minified files on each build/rebuild of the project like so :

"$(ProjectDir)..\jsmin\jsmin" < "$(ProjectDir)\scripts\models\employee.js” > "$(ProjectDir)\scripts\models\employee.min.js"

(you must adjust the script line accordingly to the position of the JSMIN in your project)

this will create a few lines of code ..

then you add instead of the regular employee.js  the newly created employee.min.js to your index.html (start page with references to JavaScript files )

Also , be careful to add newly created files to the project – Include in project . Check that it also entered into the Source Safe you are using.

Check in to all and let your team use the minified files on rebuilding the project.

Debugging in Eclipse Android 1

 

Right click on the project –> debug as-> android project

 

run through emulator

 

–> DDMS left upper corner

update heap

 

 

cause GC

 

you can see graph per line in stats

 

 

Dump HPROF file

 

Download Mat – memory analyzer tool available here

 

Convert the hprof from android to regular java dump :

The hprof file you get from Android has android specific format. You should convert hprof file take from Android OS into standard hprof format. For this you can use hprof-conv tool that is located at AndrodiSDK/tools/hprof-conv.

For example:

               hprof-conv android.hprof mat.hprof


And then open mat.hprof in Memory Analyzer.

 

overview includes all kind of sets..

 

Find Leaks

 

JQuery Mobile: Fire Mobileinit Event

http://weblogs.asp.net/yousefjadallah/archive/2011/06/28/jquery-mobile-fire-mobileinit-event.aspx

Many people asked that the Mobileinit event didn’t work. Simplicity just you need to follow this sequence:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css&quot; />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
        $(document).bind("mobileinit", function () {
            alert(‘mobileinit is fired’);
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
Hope that helps.

Debugging in Eclipse console.log app messages

 

For you to be able to see the console you’ve been writing in your app :

 

Window->Show View-> other –> write Logcat –>

You’ll get a console window listening to every message from your device.

edit filter –> Web Console

 

 

Now you’ll see your app messages

JavaScript execution exceeded timeout

 

The exception was thrown when I used

navigator.geolocation.watchPosition

 

Changed it to:

function getLocation() {
            navigator.geolocation.getCurrentPosition(updatePos, locationError, { enableHighAccuracy: true, timeout: 10000 });
        }

        var intervalID = window.setInterval(getLocation, 10000);

and then it worked

Build All in Eclipse–recompile when you want

From the starts the Eclipse checking the Build Automatically option which will work only when you runthe app.

Sometimes you want to control when you rebuild the app.

 

 

So , uncheck the Automatically building , and you will get the Ctrl+B button of build all ,

on the upper left corner .

 

Have a nice rebuild!