Jump to content

Search the Community

Showing results for tags 'image'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


There are no results to display.


  • Welcome to Smart Mobile Studio
    • News and Information
    • Pre-Sales Questions
    • Smart In the Media
    • Smart Contests
    • Meta
  • Smart Mobile Studio Discussion
    • General
    • IDE
    • RTL
    • Code
    • Client Server
    • Platform
    • Graphics
    • Deployment
    • Suggestion box
  • Smart Mobile Studio support
    • Support
    • Bug report
  • General Discussion
    • Pascal
    • Delphi
    • Javascript
    • HTML/HTML5
    • CSS
  • Resources
    • Website
    • Download Smart Mobile Studio

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL



Company name


Found 4 results

  1. Everyone, DEMO APP HERE: https://www.harmonicmix.com/200/ BUILT WITH: SMS Professiional BETA I am relatively new to SMS development, but not new to Delphi development. I have been slowly getting my hands wrapped around the power of SMS and I believe that it is a great tool and I see a lot of promise for rapid development. I have run into a number of hurdles and as a beginner, I have been slowly working through them with the hardest challenge to date being CORS as a new developer. Trying to get a server configured just so has been a challenge and something that can trip me up. However, this latest glitch has me baffled and I'm unsure if it is related to SMS, CORS, web server etc. This one has me baffled and I'm hoping I'm missing something easy and others can look at this and provide me with an AH AH moment. My target platform for now has been a browser running a SMS app which uses a REST API interface and a simple layout. I have created a demo app just to demonstrate this issue and I am using Apache as a hosting platform. But, I have already tried the app on both Apache and IIS and have duplicated issues with images loading ONLY in Chrome. So to the app.... A two form app with a simple layout. Buttons to navigate back and forth between forms. A TW3Image object placed on each form and the image is being loaded in the initialize event like I have seen in many examples The problem is this.... (I think) When I view the app in Firefox, Edge and IE it works as expected, the image loads and I see no broken links. (See good screen shot) In Chrome on MAC or Windows 10, Chrome only shows the image on both forms as a broken link. No image loads. When looking in the network debugger on Chrome, the image won't load with an error of "(failed) net::ERR_FAILED" [see screen shots for Chrome] Below is the simple code for each form. I have attached GOOD screen shots where everything looks OK and and BAD screen shots in Chrome where it fails. Thank you for your help and feedback in looking at this..... I assume it is easy and I'll be happy to share more information if needed. //=============================================================== // FORM1 CODE //=============================================================== unit Form1; interface uses System.Types, System.Types.Convert, System.Objects, System.Time, SmartCL.System, SmartCL.Time, SmartCL.Graphics, SmartCL.Components, SmartCL.FileUtils, SmartCL.Forms, SmartCL.Fonts, SmartCL.Theme, SmartCL.Borders, SmartCL.Layout, SmartCL.Application, SmartCL.Controls.Panel, SmartCL.Controls.Button, SmartCL.Controls.Image; type TForm1 = class(TW3Form) procedure W3Button1Click(Sender: TObject); private {$I 'Form1:intf'} FLayout: TLayout; protected procedure InitializeForm; override; procedure InitializeObject; override; procedure Resize; override; end; implementation { TForm1 } procedure TForm1.W3Button1Click(Sender: TObject); begin Application.GotoForm('Form2', feFromRight); end; procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components FLayout := Layout.Center(W3Panel1); W3Image1.LoadFromURL('https://www.harmonicmix.com/sites/all/images/HM_logo.png'); end; procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} end; procedure TForm1.Resize; begin inherited; end; initialization Forms.RegisterForm({$I %FILE%}, TForm1); end. //=============================================================== // FORM2 CODE //=============================================================== unit Form2; interface uses System.Types, System.Types.Convert, System.Objects, System.Time, System.IOUtils, System.Device.Storage, SmartCL.System, SmartCL.Time, SmartCL.Graphics, SmartCL.Components, SmartCL.FileUtils, SmartCL.Device.Storage, SmartCL.Forms, SmartCL.Fonts, SmartCL.Theme, SmartCL.Borders, SmartCL.Layout, SmartCL.Application, SmartCL.Controls.Panel, SmartCL.Controls.Button, SmartCL.Controls.Image; type TForm2 = class(TW3Form) procedure W3Button1Click(Sender: TObject); private {$I 'Form2:intf'} FLayout: TLayout; protected procedure InitializeForm; override; procedure InitializeObject; override; procedure Resize; override; end; implementation { TForm2 } procedure TForm2.W3Button1Click(Sender: TObject); begin Application.GotoForm('Form1', feToLeft); end; procedure TForm2.InitializeForm; begin inherited; // this is a good place to initialize components FLayout := Layout.Center(W3Panel1); W3Image1.LoadFromURL('https://www.harmonicmix.com/sites/all/images/HM_logo.png'); end; procedure TForm2.InitializeObject; begin inherited; {$I 'Form2:impl'} end; procedure TForm2.Resize; begin inherited; end; initialization Forms.RegisterForm({$I %FILE%}, TForm2); end.
  2. I was looking to see how to add an icon to my mobile device application when building with PhoneGap and originally found this doc Icons and Splash Screens http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/ BTW, if you don't already know, you can have SMS generate a template config.xml file for you Project Options\ Linker \ Check - "Generate Cordova config.xml" and..............after trying some default icon declarations in my config.xml file, I found this very handy tool for generating all the correct size images you can declare in the config.xml file PhoneGap Image Generator http://pgicons.abiro.com/ I am sure there are others. Anyway, find or create a very nice high res image to start with and it will create all the various aize files for you Hope this helps
  3. I have a TW3Scrollbox on my layout. On the scrollbox I have a TW3Image, which I am trying to place below a label (fDates) and center it in the Scrollbox. The images is 150 X 150. I can't seem to get the image to display in the correct position using setbounds. Its always off to the right. when I use showmessages to display the image width and height, those are off too. How do I get the image to be sized 150 X 150 and center in the scrollbox? procedure TfrmNavigation.ResizeContent; begin fImage.SetBounds((fScrollBox.Content.clientWidth div 2)-75, fDates.Top + fDates.Height, (fScrollBox.Content.clientWidth div 2)+75, fDates.Top + fDates.Height + 150); end; procedure TfrmNavigation.Resize; begin inherited; if assigned(FLayout) then begin FLayout.Resize(self); ResizeContent; end; end;
  4. lynkfs

    Cloudinary image management

    A while ago I got the request to make an image gallery. Not the most challenging of tasks maybe, but after some discussion and thinking about it the list of requirements did become rather large. What about having to provide an easy management system of uploaded images, making it fit for all mobile and desktop devices - not only screen sizes but also resolution, building an easy upload facility of images, include a one-step upload process using the device camera if there is one, automatic client-side re-sampling to reduce file size etc. Fortunately there are a number of mature image management systems available, so not everything needs to be developed from scratch. The choice for this project was to have a deeper look at Cloudinary (www.cloudinary.com). Cloudinary provides image (and video) management for web developers which includes image upload services, cloud storage, administration management and especially image manipulation, transformation services and fast delivery. And it offers all of this as a freemium service : free up to a (rather large) number of uploaded images, with a subscription mechanism for larger quantities. Accessing uploaded images is as simple as // AString := 'res/myimage01.png'; AString := 'http://res.cloudinary.com/your-account/image/upload/' + 'w_' + inttostr(W3Image.Width) + ',h_' + inttostr(W3Image.Height) + ',dpr_' + GetDPR + ',c_fill/v1438317145/myimage01_abcdef.png'; W3Image1.LoadFromURL(AString); The good thing is that the image is on the fly server-side re-sized to the right dimensions (w_ and h_ parameters), that it fills this dimension (c_fill parameter) and that it fits the correct device pixel ratio, which covers anything from low-res to retina displays. The GetDPR function is included at the end of this post. To get the available images I used a small server-side php file to serve this content and make it available in array-format. // cloudinary.php : <?php header("Access-Control-Allow-Origin: *"); $url_cloudinary = $_POST['url_cloudinary']; $arr = file_get_contents($url_cloudinary); echo $arr; ?> The first header line is superfluous if this file is located on the same server location as our project. The second line reads the Cloudinary account information as a parameter while the third and fourth line populate and serve the info of available images. Obviously this approach has an upper limit in what the functions used (file_get_contents, echo) can handle but for a reasonable number of images this works fine. The gallery-page has a scrollable panel and initialises as : procedure TForm1.FormActivated; begin inherited; If not assigned(FHttp) then begin FHttp := TW3HttpRequest.Create; ReadImages; end; end; procedure TForm1.ReadImages; var cloudinaryurl: string; begin //retrieve list FHttp.OnDataReady := RetrieveImages; cloudinaryurl := 'https://123456789012345:abcdefghijklmnopqrstuvwxyz@api.cloudinary.com/v1_1/your-account/resources/image/upload/?max_results=500'; FHttp.open("POST","http://..wherever../cloudinary.php"); //where the php file resides FHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); FHttp.send('url_cloudinary=' + cloudinaryurl); FullScreenSpinner.Enter; end; This is actually a bad design. The cloudinaryurl account parameter contains access and password information and should not be send from the client. Better to hard-code it server-side in the php file rather than sending it as a parameter. Once the image info is available the ondataready callback is invoked. This procedure sets up the scroll-environment and populates it with all images as 70 x 70 thumbnails. It also sets up a larger image at the end, which will be populated with a larger version of the thumbnail when pressed/clicked. procedure TForm1.RetrieveImages(Sender: TW3HttpRequest); begin //showmessage(sender.responsetext); //callback 'ondataready' cursor := JSON.parse(FHttp.ResponseText); MaxRows := cursor.resources.length; FullScreenSpinner.Leave; Panel1 := TW3Panel.Create(self); ScrollElement1 := TW3ScrollWindow.Create(Panel1); Panel1.SetBounds(0,20,ClientWidth, ClientHeight-40); ScrollElement1.SetBounds(0,0,panel1.width-40,panel1.height); dy := 5; dx := 25; For var i := 0 to MaxRows-1 do begin PopuLateScrollList(i); end; inc(dy,90); BigImage:=TW3Image.Create(ScrollElement1.Content); BigImage.SetBounds(trunc(Panel1.Width * 0.15), dy+35, trunc(Panel1.Width * 0.7), trunc(Panel1.Width * 0.7)); AString := 'http://res.cloudinary.com/your-account/image/upload/' + 'w_' + inttostr(BigImage.Width) + ',h_' + inttostr(BigImage.Height) + ',c_pad/v' + cursor.resources[0].version + '/' + cursor.resources[0].public_id + '.' + cursor.resources[0].format; BigImage.LoadFromURL(AString); ScrollElement1.Content.Height:=dy + trunc(Panel1.Width * 0.7)+70; //Size content to all images ScrollElement1.ScrollAPI.Refresh; //Update IScroll scrollelement1.ScrollApi.Options.VerticalScrollbar := true; ScrollElement1.SetBounds(0,0,panel1.width,panel1.height); end; Procedure TForm1.PopulateScrollList(row:integer); var mImage: TW3Image; mLabel: TW3Label; Begin mImage := TW3Image.Create(ScrollElement1.Content); mImage.SetBounds(dx,dy,70,70); AString := 'http://res.cloudinary.com/your-account/image/upload/' + 'w_70,h_70,c_thumb/v' + cursor.resources[row].version + '/' + cursor.resources[row].public_id + '.' + cursor.resources[row].format; mImage.LoadFromURL(AString); w3_setStyle(mImage.Handle,'cursor','pointer'); mImage.OnClick := procedure(Sender:TObject) begin FullScreenSpinner.Enter; AString := 'http://res.cloudinary.com/your-account/image/upload/' + 'w_' + inttostr(BigImage.Width) + ',h_' + inttostr(BigImage.Height) + ',c_pad/v' + cursor.resources[row].version + '/' + cursor.resources[row].public_id + '.' + cursor.resources[row].format; AIndex := row; BigImage.LoadFromURL(AString); ScrollElement1.ScrollApi.ScrollTo(0,-BigImage.Top,1,false); FullScreenSpinner.Leave; end; // mLabel:=TW3Label.Create(ScrollElement1.Content); mLabel.setBounds(dx,dy+75,70,16); mLabel.Caption := 'Image' + inttostr(row+1); mLabel.OnClick := procedure (sender: TObject) begin AIndex := row; end; inc(dx,75); if dx > Panel1.width - 85 then begin dx := 25; inc(dy,95); end; end; The last piece of the puzzle is the use of the device camera. Cloudinary has a simple widget which takes care of that. W3Button1.OnClick := procedure (Sender: TObject) begin asm cloudinary.openUploadWidget({ cloud_name: 'your-account', upload_preset: 'your-account', cropping: 'server'}); end; end; Select the camera, take a picture and upload in one go. Function TForm1.GetDPR:String; var DPRString: String; DPR : Float; DPR_Supported_F : Array of Float; DPR_Supported_S : Array of String; begin DPRString := '1'; DPR := BrowserApi.DevicePixelRatio; DPR_Supported_F := [0.75, 1.0, 1.3, 1.5, 2.0, 3.0]; DPR_Supported_S := ['0.75', '1.0', '1.3', '1.5', '2.0', '3.0']; for var x := Low(DPR_Supported_F) to High(DPR_Supported_F) do begin if DPR_Supported_F[x] >= DPR then begin DPR := DPR_Supported_F[x]; DPRString := DPR_Supported_S[x]; Break; end; end; Result := DPRString; // ShowMessage(Result); end;