Aktuelle Zeit: 08.12.2019 10:17

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]




Ein neues Thema erstellen Auf das Thema antworten  [ 11 Beiträge ]  Gehe zu Seite 1, 2  Nächste
Autor Nachricht
 Betreff des Beitrags: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 08:36 
Offline

Registriert: 19.10.2014 15:51
Ihr wertet Spiderbasic gerade um 1000% auf, liebe Leute!
Ihr seid echt spitze!

Kann man mit CSS auch 2d Bilder in 3d umwandeln? Ich möchte gerne 2d-Spielkarten "nach hinten kippen", sodass man schräg von oben drauf sieht.
Ist das auch mit SB machbar?

__________________________________________________
Thread geteilt
SpiderBasic>SpiderBasic
SpiderBasic Library - Liste neuer Funktionen>2D-Bilder in 3D nach hinten kippen
17.10.2018
RSBasic

_________________
Ich programmiere plattformunabhängig und suche immer Lösungen für alle Plattformen.
Win 7/10, Linux Mint Cindy 3 (Debian), Mint 18.3 / 19.1


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste neuer Funktionen
BeitragVerfasst: 17.10.2018 08:43 
Offline
Benutzeravatar

Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9
das Thema passt eigentlich nicht in diesen Thread. @Ray: Kannste das hier verschieben?

stevie1401 hat geschrieben:
Ist das auch mit SB machbar?

Prinzipiell ja. Es gibt wohl etliche JavaScript-Codes, mit denen man das machen kann.

Beispielsweise: https://nnattawat.github.io/flip/

Muss sich nur jemand finden, der das in SB implementiert.

Grüße ... Peter

_________________
Schrödingers Smiley :):


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 09:04 
Offline
Admin
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Berlin
@stevie1401
2D in 3D nach hinten kippen habe ich schon umgesetzt: viewtopic.php?p=349354#p349354
Nur kann man damit nur Gadgets drehen, aber ich werde noch eine weitere Funktion bauen, damit man auch Grafiken in 3D drehen kann.

_________________
BildBildBildBild BildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: SpiderBasic Library - Liste neuer Funktionen
BeitragVerfasst: 17.10.2018 09:10 
Offline
Benutzeravatar

Registriert: 08.03.2013 14:27
Wohnort: ERB
Geht mit CSS Transform sogar noch einfacher: https://www.mediaevent.de/css/transform.html

Aber CSS scheint wohl mit Spiderbasic nicht ganz so schön zu funktionieren. Eigentlich wäre das eine gute Möglichkeit von den Entwicklern, passende Compiler-Funktionen einzubetten, mit denen sich ein CSS-File bearbeiten kann. z.B:
Code:
CompilerAddStyle(selector$,option$,value$)

Damit werden Selektoren in eine Liste eingetragen und darin die Optionen und Werte gelistet. Beim "kompilieren" wird aus dieser Liste ein weiteres CSS-File generiert und eingebettet. Damit könnte man sich tonnenweise Prozeduren sparen und es würden sich viele Dinge einfacher und performanter realisieren lassen (u.a. das Einfärben von Tabellenzeilen bzw. Spalten). So wie es aussieht wird dies aber momentan über Javascript erledigt. Mir als alt eingesessener Webtüftler läuft es dabei Eiskalt den Rücken runter. :lol:

EDIT: OMG Jetzt wurde der Beitrag verschoben. Dies bezieht sich auf einen Beitrag, der jetzt irgendwo anders liegt!!!
viewtopic.php?f=33&t=31132

_________________
USAC Protokoll
Universal Stringbased Application Communication Protocoll

Github: Zum Spezifikationdokument v0.01


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 09:58 
Offline
Admin
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Berlin
@TroaX
Ich hab deinen Beitrag hierher verschoben.
Genau so hätte ich auch gemacht. Dafür gibt es ja transform: rotate3d().
Ich habe den anderen Code auch schon mit transform: rotate3d() gemacht.

TroaX hat geschrieben:
Aber CSS scheint wohl mit Spiderbasic nicht ganz so schön zu funktionieren. Eigentlich wäre das eine gute Möglichkeit von den Entwicklern, passende Compiler-Funktionen einzubetten, mit denen sich ein CSS-File bearbeiten kann. z.B:

+1

_________________
BildBildBildBild BildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 11:48 
Offline
Admin
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Berlin
@stevie1401
Wie zeigst du deine Karten an? Bestimmt mit ImageGadget oder?
Wenn ja, dann hast du ja schon die Lösung: viewtopic.php?p=349354#p349354
Ich wollte es gerade umsetzen, aber da fiel mir ja ein, dass das garnicht notwendig ist, da man Grafiken in SpiderBasic nur mit ImageGadget anzeigen kann und dieses kannst du problemlos mit meinem Code in 3D drehen.

Beispiehaft mit einer sehr einfachen Spielkarte, die sich dann dreht:
Code:
EnableExplicit

Procedure SetGadgetRotate3D(gadget, x, y, z, degree)
  Protected id.s
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;Styles setzen
  ! GadgetElement.css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
 
EndProcedure

;================================================== Beispielcode ==================================================

Global angle

Procedure TimerEvents()
  Select EventTimer()
    Case 1
      angle + 1
      SetGadgetRotate3D(1, 1, 0, 0, angle)
      If angle = 360
        angle = 0
      EndIf
     
  EndSelect
EndProcedure

CreateImage(1, 120, 200, 24)
If StartDrawing(ImageOutput(1))
  Box(0, 0, 120, 200, RGB(0, 0, 0))
  Box(2, 2, 116, 196, RGB(255, 255, 255))
  DrawText(10, 10, "A", RGB(255, 0, 0))
  LineXY(50, 100, 60, 80, RGB(255, 0, 0))
  LineXY(50, 100, 60, 120, RGB(255, 0, 0))
  LineXY(60, 80, 70, 100, RGB(255, 0, 0))
  LineXY(60, 120, 70, 100, RGB(255, 0, 0))
  StopDrawing()
EndIf

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ImageGadget(1, 100, 100, 120, 200, ImageID(1), 0)
 
  AddWindowTimer(0, 1, 10)
  BindEvent(#PB_Event_Timer, @TimerEvents())
 
EndIf

_________________
BildBildBildBild BildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 18:00 
Offline

Registriert: 19.10.2014 15:51
Leider kippen meine Karten nicht:




doko-lounge.de/Karten45Grad.jpg

(Ich bekomme das Bild leider nicht hier rein)

Degree=45
Ist aber egal was ich einstelle. Die Bilder werden nur verformt.

_________________
Ich programmiere plattformunabhängig und suche immer Lösungen für alle Plattformen.
Win 7/10, Linux Mint Cindy 3 (Debian), Mint 18.3 / 19.1


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 19:05 
Offline
Admin
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Berlin
Okay, du willst, dass es auch perspektivisch gedreht wird. Bitte schön:
Code:
EnableExplicit

Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
  Protected id.s
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;Styles setzen
  ! GadgetElement.css("perspective", v_perspective_width + "px");
  ! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
 
EndProcedure

;================================================== Beispielcode ==================================================

Global angle

Procedure TimerEvents()
  Select EventTimer()
    Case 1
      angle + 1
      SetGadgetRotate3D(1, 1, 0, 0, angle, 600)
      If angle = 360
        angle = 0
      EndIf
     
  EndSelect
EndProcedure

CreateImage(1, 120, 200, 24)
If StartDrawing(ImageOutput(1))
  Box(0, 0, 120, 200, RGB(0, 0, 0))
  Box(2, 2, 116, 196, RGB(255, 255, 255))
  DrawText(10, 10, "A", RGB(255, 0, 0))
  LineXY(50, 100, 60, 80, RGB(255, 0, 0))
  LineXY(50, 100, 60, 120, RGB(255, 0, 0))
  LineXY(60, 80, 70, 100, RGB(255, 0, 0))
  LineXY(60, 120, 70, 100, RGB(255, 0, 0))
  StopDrawing()
EndIf

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ImageGadget(1, 100, 100, 120, 200, ImageID(1), 0)
 
  AddWindowTimer(0, 1, 10)
  BindEvent(#PB_Event_Timer, @TimerEvents())
 
EndIf

_________________
BildBildBildBild BildBild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 19:10 
Offline
Benutzeravatar

Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9
Herrje, Ray, Du bist einfach zu schnell! Wie soll man denn da noch mithalten? :shock:

-> http://test.tuebben.de/cards/

Code:
EnableExplicit

Enumeration
  #Window
  #ImageGadget
EndEnumeration

Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
  Protected id.s
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;Styles setzen
  ! GadgetElement.css("perspective", v_perspective_width + "px");
  ! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
 
EndProcedure

;================================================== Beispielcode ==================================================

Global angle
Global CurrentImage

Procedure TimerEvents()
  Select EventTimer()
    Case 1
     
      angle + 1
     
      SetGadgetRotate3D(#ImageGadget, 1, 0, 0, angle, 600)
     
     
      Select angle
         
        Case 90, 270
         
          If CurrentImage = 0
            CurrentImage = 1
          Else
            CurrentImage = 0
          EndIf
         
          SetGadgetState(#ImageGadget, ImageID(CurrentImage))
         
        Case 360
         
          angle = 0
         
      EndSelect
     
  EndSelect
 
EndProcedure


Procedure Main()
 
  OpenWindow(#Window, 0, 0, 500, 500, "Window", #PB_Window_ScreenCentered)
  ImageGadget(#ImageGadget, 100, 100, 120, 200, ImageID(CurrentImage), 0)
 
  AddWindowTimer(#Window, 1, 10)
  BindEvent(#PB_Event_Timer, @TimerEvents())
 
EndProcedure

Procedure Loaded(Type, Filename$, ObjectId)
  Static nbLoadedImages
  nbLoadedImages + 1
  If nbLoadedImages = 2
    Main()
  EndIf
EndProcedure

Procedure LoadingError(Type, Filename$, ObjectId)
  Debug Filename$ + ": loading error"
EndProcedure

; Register the loading event before calling any resource load command
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())

LoadImage(0, "resources/front.jpg")
LoadImage(1, "resources/back.jpg")

_________________
Schrödingers Smiley :):


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: 2D-Bilder in 3D nach hinten kippen
BeitragVerfasst: 17.10.2018 19:19 
Offline
Admin
Benutzeravatar

Registriert: 05.10.2006 18:55
Wohnort: Berlin
Dafür zeigt dein Beispielcode zwei verschiedene Seiten einer Spielkarte. :allright:

_________________
BildBildBildBild BildBild


Nach oben
 Profil  
Mit Zitat antworten  
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 11 Beiträge ]  Gehe zu Seite 1, 2  Nächste

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste


Sie dürfen keine neuen Themen in diesem Forum erstellen.
Sie dürfen keine Antworten zu Themen in diesem Forum erstellen.
Sie dürfen Ihre Beiträge in diesem Forum nicht ändern.
Sie dürfen Ihre Beiträge in diesem Forum nicht löschen.

Suche nach:
Gehe zu:  

 


Powered by phpBB © 2008 phpBB Group | Deutsche Übersetzung durch phpBB.de
subSilver+ theme by Canver Software, sponsor Sanal Modifiye