PureBoard

Verfasst: **17.10.2018 08:36**

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

Verfasst: **17.10.2018 08:43**

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

Verfasst: **17.10.2018 09:04**

@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.

Verfasst: **17.10.2018 09:10**

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: Alles auswählen

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.

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

Verfasst: **17.10.2018 09:58**

@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

Verfasst: **17.10.2018 11:48**

@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: Alles auswählen

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

Verfasst: **17.10.2018 18:00**

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.

Verfasst: **17.10.2018 19:05**

Okay, du willst, dass es auch perspektivisch gedreht wird. Bitte schön:

Code: Alles auswählen

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

Verfasst: **17.10.2018 19:10**

Herrje, Ray, Du bist einfach zu schnell! Wie soll man denn da noch mithalten?

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

Code: Alles auswählen

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")

Verfasst: **17.10.2018 19:19**

Dafür zeigt dein Beispielcode zwei verschiedene Seiten einer Spielkarte.

PureBoard

2D-Bilder in 3D nach hinten kippen

2D-Bilder in 3D nach hinten kippen

Re: SpiderBasic Library - Liste neuer Funktionen

Re: 2D-Bilder in 3D nach hinten kippen

Re: SpiderBasic Library - Liste neuer Funktionen

Re: 2D-Bilder in 3D nach hinten kippen

Re: 2D-Bilder in 3D nach hinten kippen

Re: 2D-Bilder in 3D nach hinten kippen

Re: 2D-Bilder in 3D nach hinten kippen

Re: 2D-Bilder in 3D nach hinten kippen

Re: 2D-Bilder in 3D nach hinten kippen